React 18 has been released, it introduces some exciting new concepts and lays a solid foundation for react future. Take a looks at the official release notes to learn more. Let’s explore the latest updates.
Automatic Batching
Sometimes we are curious how exactly code is getting executed in the background, Batching is something that application developers generally don’t care about.
Batching is all about grouping multiple state updating calls together so that they are executed as one state update call instead of multiple calls to achieve better computational performance.
// Before: only React events were batched.
setTimeout(() => {
setCount(c => c + 1);
setFlag(f => !f);
// React will render twice, once for each state update (no batching)
}, 1000);// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
function handleClick() {
setCount(c => c + 1); // Does not re-render yet
setFlag(f => !f); // Does not re-render yet
// React will only re-render once at the end (that's batching!)
}
Automatically batching will be handled by default in React 18, further can opt for batching by using ReactDom.FlushSync().
Transitions
With React 18 and the addition of the concurrency concept, you can tell React that a certain state update has a lower priority than other state updates, and React is then able to treat the other updates with higher priority.
Now, You tell React about a state update that has a lower priority by using one of the new APIs introduced in React 18.
With React 18, You can use the useTransistion hook in functional components (Return an array with two values i.e isPending and startTransistion )and the startTransistion function in places where hooks can’t be used. For example, class-based components tell React that a certain state update process is about to start and that it shouldn’t wait for this process to finish before processing other state updates.
// Wrap a state update with startTransition() to let React know that it may be handled with lower priority.startTransition(() => setSelectedUser(user));
You can further understand this through a real-world example from the link here.
Suspense Features
As you know suspense component was also already added in an older version of React, and it can be used to be wrap around lazily loaded components. Lazy loading simply means that you implement code splitting to only load code for a certain component when it is needed. This can help with performance since less code has to be downloaded initially. This is often used in combination with routing to show the fallback component.// Show a fallback component until another component is ready for rendering
<Suspense fallback={<Loading />}
<LazyComponent />
</Suspense?However, before React version 18, you could not use the Suspense component if you also used server-side rendering (SSR) because it could cause an error. But now React 18 enables suspense for server-side rendering. In addition, Suspense will also be used for general data fetching in the future.
New Root API
The root API is a pointer to the top-level data structure that React leverages to track a tree to render.
- Legacy old root API — the existing API with
ReactDOM.render. This API will be deprecated after the new React release - New root API — new root API with
ReactDOM.createRoot. This root works in React 18 with all-new improvements and features
Let’s check and compare the two root APIs. Here’s a typical usage of the legacy root API:
import ReactDOM from 'react-dom';
import App from './App';ReactDOM.render(<App />, document.getElementById('app'));
Let’s modify the previous codes using the new root API:
import ReactDOM from 'react-dom';
import App from './App';// create a root
const root = ReactDOM.createRoot(document.getElementById('app'));// render an element to the root
root.render(<App />);
Conclusion
The new React 18 update looks impactful with out-of-box improvements. The new React has opened up new possibilities, ones that were previously impossible to have in a Javascript framework.
