React 18: Concurrent Features and the New Root API

Sat, 15 Jan 2022 00:00:00 +0000

React 18 introduced concurrent rendering, automatic batching, and a new root API. These changes improve perceived performance without rewriting your entire app.

createRoot

import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

The legacy ReactDOM.render is deprecated. createRoot enables concurrent features.

Suspense and Transitions

useTransition marks updates as non-urgent-keeping the UI responsive during heavy re-renders:

const [isPending, startTransition] = useTransition();

function handleTab(tab) {
  startTransition(() => setActiveTab(tab));
}

Strict Mode Changes

Strict Mode double-invokes effects in development to surface side-effect bugs. Audit useEffect cleanup functions before upgrading.

React-18 on David Lang

React 18: Concurrent Features and the New Root API

createRoot

Suspense and Transitions

Strict Mode Changes