React 18, what’s new?
Reactjs is an open-source, free JavaScript collection obtained for creating user configuration, particularly for single unit apps. I wrote a few articles about some functionalities that you can find in Reactjs:
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@alphaAnd ReactDOM:
npm install react-dom@alphaAccording 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 React.lazy.
- Automatic batching
Batching in React is whenever multiple state updates are combined into a single re-render.
Example:
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.
2. Transitions
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)
When doing a React application, if we are not using SSR, the website always appears blank when we run it for the first time. That is because the browser needs to fetch and read our Javascript which take some time before the components load and the page becomes interactive.
With SSR, the user sees how the apps look directly but without all the interactions while the Javascript is being loaded.
The way it works is by rendering all the components on the server first, then sending the results as HTML to the browser. After that, the Javascript is loaded as usual and the HTML becomes interactive by what is called hydration. This turns the static HTML elements into the dynamic React components.
The main problem with this approach is that as long as the Javascript hasn’t been fetched, loaded and the HTML hydrated, the page won’t be interactive. To solve this issue, React 18 offers two new features for 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.
- Selective Hydration: Before, we would have to wait for every component to be rendered to begin hydration, leading to code splitting problems. Components now wrapped with Suspense won’t block hydration anymore. Back to the example to the article page, the comments that are wrapped with Suspense won’t block the article and other components to be hydrated. The comments will get hydrated once the browser gets both its content and Javascript code.
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.
Conclusion
You can find more information about this new feature by clicking this link to the official documentation
