🏠 Home

What is new in React 18?

React 18 just released! It mostly includes new features based on the new concurrent renderer. It changes the core rendering model. The key take away is rendering is interruptible! It means React can start a rendering, pause & continue later.

How to update to latest React 18?

  1. Install latest version
npm install react react-dom
  1. Replace ReactDom.render with createRoot. The change is to (1) improve how we manage roots & (2) allows optional concurrent features. Similarly for server-side rendering, replace hydrate with hydrateRoot.
const container = document.getElementById('app');
const root = createRoot(container);

root.render(<App />);
  1. Use <StrictMode> to surface concurrency-related bugs

New features

6 new features include:

  • Automatic batching
  • Transitions
  • New suspense features
  • New client & server rendering APIs
  • New strict mode behaviors
  • New hooks

A brief summary of each feature:

Automatic batchingGroup multiple updates into 1 to reduce rendering. This is automatic with createRoot but we can opt-out with flushSync.
TransitionsUsed to distinguish “urgent” & “non-urgent” updates. So now, updates have priorities. The non-urgent updates are wrapped in startTransition. There’s also useTransition.
New suspense featuresExpanding <Suspense> and allow for server-side use.
New client & server rendering APIsNew client-side APIs: createRoot and hydrateRoot. New server-side APIs: renderToPipeableStream and renderToReadableStream.
New strict mode behaviorsAdd development-only check for check if components are resilient to mounting & destroying multiple times
New hooks5 new hooks!

New hooks

useIdTo generate unique IDs (client & server-side) for accessibility. Not for generating keys.
useTransitionMark some state updates as non-urgent
useDeferredValueDefer re-rendering part of the tree. It is interruptible & doesn’t block user input
useSyncExternalStore[For libraries] Allow external stores to support concurrent reads
useInsertionEffect[For libraries] Allow CSS-in-JS libraries to address performance issues of injecting styles

Interesting updates

One interesting update coming to a minor version update for React 18 is including <Offscreen>. It allows us to prepare UI in background and show it once it’s ready for user.

React 18 also includes Server Components that are experimental and they help interactivity of client-side apps with server-side rendering.