React pretends SPAs don’t exist | Frontend Weekly vol. 130

1. does React pretend that SPAs don’t exist?

In the previous edition of our report, we tossed you a link to the new React documentation. In almost all respects it is better than the old documentation. It’s written with hooks in mind, includes interactive examples and covers many topics that were missing from the previous version.

The release of the new documentation was not without controversy. Many users complained about the lack of coverage of important topics like testing and acessibility. However, the “Start a New React Project” page stirred up the most discussion. As expected by the community, it no longer mentions the outdated Create React App. Instead, it describes how to launch a project with Next.js, Remix or Gatsby. And this is where the controversy begins. The documentation reduces applications written without the framework to a few edge cases. What’s more, wherever possible, the documentation advises against developing applications this way.

On the one hand, this approach may seem reasonable. New React functionalities such as React Server Components will not work without the React framework. In addition, frameworks introduce standardized solutions for problems such as routing or data fetching. This makes the initial setup much simpler and does not require a lot of difficult technical decisions.

On the other hand, React for years bragged about being just a library to which the appropriate blocks can be added as needed. Many also point out that using a complex framework to create a simple dashboard, is shooting a cannon at a fly. In other words, a React application without a framework is still a popular use case, not just an edge case.

If you want to delve into the arguments of the SPA fans, the CEO of .wasp (a full-stack framework based on React) published a great post this week in which he delves into the topic.

Discover more IT content selected for you

In Vived, you will find articles handpicked by devs. Download the app and read the good stuff!

2. Angular adds support for required Inputs!

Angular has begun to evolve with astonishing speed over the past year. One by one it is addressing developers’ biggest pain points. From Standalone Components, through Strictly Typed Forms and Functional Router Guards, to small improvements like Self Closing Tags and Default Module Exports. All indications are that Angular 16 will continue this trend. In addition to Signals, which we described a few weeks ago, Required Inputs will be coming to the new version of the framework.

@Component({
  selector: 'app-test',
  template: '<h2>Hello {{name}}</h2>',
  standalone: true,
})
class MyComponent {
  @Input({required: true}) name: string;
}

In case we mark @Input() as required, and then anywhere in our application we forget to assign it a value, the compiler will throw an adequate error. Until now, similar behavior could be achieved through a few clever hacks, but this wa neither an intuitive nor readable solution.

@Component({
  selector: 'app-test[name]',
  template: '<h2>Hello {{name}}</h2>',
  standalone: true,
})
class MyComponent {
  @Input() name: string;
}

Required Inputs may not be a revolution like React Server Components, but it was the lack of such basic functionality that Angular suffered the most. Looking holistically at the changes taking place in Angular, one has to admit that the framework is finally starting to move in the right direction.

Discover more IT content selected for you

In Vived, you will find articles handpicked by devs. Download the app and read the good stuff!

Bonus: Hooks you probably don’t need

Since the past week was not full of news, we have a little bonus for you: a list of hooks you probably won’t need. The article, prepared by Brad Westfall, details all the little-popular hooks and explains when you might need them. If you’re looking for a read, for your Saturday morning coffee, I definitely recommend it!

Hooks you probably don’t need:
🔴 useDebugValue()
🔴 useInsertionEffect()
🔴 useImperativeHandle()
🟠 useSyncExternalStore()
🟠 useDeferredValue()
🟢 useEffect()
🟢 useLayoutEffect()

🔴 Most definitevely you will never use it
🟠 There are some corner cases when you might need it
🟢 You should use it on daily basis

Hooks You Probably Don’t Need