Cheatsheet for react 18
This is my personal study notes of the React 18 changes, which were provided by React team in the form of Blogs and Youtube sessions.
Concurrency
Concurrency is not a feature. It is a new behind-the-scenes mechanism that enables React to prepare multiple versions of your UI at same time. The key feature of concurrent react is that rendering is interruptible.
Before react 18, nothing could stop the rendering. But now rendering can be paused and abandoned in progress rendering too.
There are two type of re-rendering in React 18
- Urgent re-rendering reflects direct interaction, like typing, clicking, and so on. Here users expect immediate changes on site. Urgent Re-rendering cannot be interrupted.
- Non Urgent(Transition) re-rendering transitions the UI from one view to another. Here the user is not much involved directly and some delay is ok. Intermediate screen is not required here. Non urgent re-rendering can be paused, restarted after the urgent task, current rendering can be abandoned also on the base of requirements.
Concurrency makes it possible to have non urgent tasks. Currently we need to use the below api for it. In future concurrency will be automatically handled by React.
useTransition: a hook to start transitions, including a value to track the pending state.
startTransition: a method to start transitions when the hook cannot be used.
Gradually Adopting Concurrent Features
Concurrency is a breaking change. It will break the existing functioning components. To provide support to existing components, currently concurrency is kept optional, it’s not mandatory. By default components are urgent, these are made non urgent with the help of hooks(useTransition) and methods(startTransition).
<StrictMode> is used to help surface concurrency-related bugs during development. It has no impact on production build.
createRoot: New method to create a root to render or unmount. Use it instead of ReactDOM.render. New features in React 18 don’t work without it.
hydrateRoot: New method to hydrate a server rendered application. Use it instead of ReactDOM.hydrate in conjunction with the new React DOM Server APIs. New features in React 18 don’t work without it.
Automatic Batching
Earlier react used to batched the states only in react events now react batch the states in async functions too. This is React’s internal change, no direct impact on developers.
Suspense
In SSR the component enclosed in <Suspense>…</Suspense> will be loaded later. We can put the slow code in suspense so that the first load time can be reduced.
New Hooks
useTransition and startTransition let you mark some state updates as not urgent.
useDeferredValue lets you defer re-rendering a non-urgent part of the tree.
Below hooks are introduced for Library only not for normal coding.
- useId is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches.
- useSyncExternalStore is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous.
- useInsertionEffect is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render.