React 18, what’s new?
I’ve recently build a few clones using React and have learned a lot doing so. I built a facebook-clone, amazon-clone and tinder-clone. I need to update the Firebase database as some of these sites may look broken right now, but it is because I was in test mode and the library needs to be updated.
As I’m learning and practicing React, I feel that it’s important to stay up to date. This is why I went ahead and learnt about the new React 18.
So, what’s new?
React Core Team released an alpha version of React18. This release is more focused on User Experience and internal architecture changes, including adaptation to concurrent features.
We can install React 18 right away using:
npm install react@alpha
npm install react-dom@alpha
According to official React documentation, when it’s released, React 18 will include out-of-the-box improvements (like automatic batching), new APIs (like
startTransition), and a new streaming server renderer with built-in support for
- Automatic batching
Batching in React is whenever multiple state updates are combined into a single re-render.
In this example, the component would only be re-rendered once after handleClick is called, although we might think setCount and setClicked would trigger two re-renders. While this works well at the moment, if you’re calling multiple state updates inside a different context, such as a callback, a promise, a timeout, (see screenshot below) React won’t batch these two updates into one and you’ll get two re-renders when only one is needed.
With React 18, all these use-cases will now be covered and state updates will be batched will be batched automatically no matter what is the context.
Also if you happen not to want these updates to be batched, you’ll need to use flushSync() that will re-render your component every time it’s done running the function your passing to. So with the following example, the component will render twice.
A new feature that allows you to tell React which updates are urgent, and which are not. Let’s see an example below:
In this example, let’s imagine a search input that filters out elements . As the user types, the input re-render, but the result doesn’t show right away. In this example, we’re marking the input value change as urgent, and run our secondary update inside a transition, as it might trigger slow computations and could freeze or slow down the whole user experience as they type.
startTransition() is great for any update you want to move to the background such as slow or complex tasks, or when update relies on fetching data that might take some time due to slow network.
3. Suspense and Server Side Rendering (SSR)
- Streaming HTML: the server can send pieces of components as they get rendered. This works by using Suspense, where we would say which parts of our application will take longer to load, and which ones should be rendered directly. Taking an example of an article page with comments, we could say that we want the article to be rendered immediately, but don’t wait for the comments to be ready to send HTML to the browser. This would display a spinner first in place of the comments until we get the HTML back.
Another thing is that we happen to interact with one of the components before it’s fully hydrated, React will prioritize this component’s hydration. This ensures that the most critical interactions are to be repeated as soon as we can hydrate the related component, making sure it’s hydrated before the others.
You can find more information about this new feature by clicking this link to the official documentation