Unlocking React 18: Master Concurrent Mode, Automatic Batching & New Hooks

React 18 was officially released on March 29, 2022 after a year of preparation, bringing major changes such as Concurrent Mode, startTransition, automatic batching, streaming server‑side rendering, Server Components, Offscreen, and several new hooks.

Concurrent Mode

Concurrent Mode (CM) is a low‑level architecture that lets React prepare multiple UI versions simultaneously. During rendering each Fiber checks for higher‑priority updates; if one exists, the current low‑priority work is paused and later resumed, similar to an OS multitasking scheduler.

For most developers CM is invisible—upgrading to React 18 does not alter existing code—but it enables higher‑level APIs like Suspense , Transitions , and streaming SSR.

Example of urgent vs. transition updates:

const [inputValue, setInputValue] = useState();
const onChange = (e) => {
  setInputValue(e.target.value); // urgent update – UI updates immediately
  setSearchQuery(e.target.value); // non‑urgent update – can be deferred
};
return (
  <input value={inputValue} onChange={onChange} />
);

Marking the non‑urgent part with startTransition:

const [searchQuery, setSearchQuery] = useState();
const handleChange = (e) => {
  const value = e.target.value;
  setInputValue(value); // urgent
  startTransition(() => {
    setSearchQuery(value); // transition – low priority
  });
};

Automatic Batching

Before React 18, React only batched state updates inside React event handlers. Updates inside setTimeout, promises, or native events caused multiple renders.

// before React 18
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}); // two renders

React 18 batches all updates automatically, regardless of context:

// React 18 – single render
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}); // one render

If you need to force synchronous updates, use flushSync:

import { flushSync } from 'react-dom';
function handleClick() {
  flushSync(() => setCounter(c => c + 1));
  flushSync(() => setFlag(f => !f));
}

Streaming Server‑Side Rendering (SSR)

Traditional SSR renders the whole page on the server before sending it to the client, causing delays if any part is slow. React 18’s new Suspense‑based streaming SSR allows the server to send HTML chunks as soon as they are ready.

Example layout with a Suspense boundary around a slow Comments component:

<Layout>
  <NavBar />
  <Sidebar />
  <RightPane>
    <Post />
    <Suspense fallback=<Spinner />>
      <Comments />
    </Suspense>
  </RightPane>
</Layout>

The server streams the markup for NavBar, Sidebar, and Post first, then later streams the Comments once its data is ready.

Server Components

Server Components run on the server, return a lightweight description (DSL) to the client, and never ship their dependencies. They can read files, access databases, and perform any Node.js operation.

import fs from 'react-fs';
function Note({ id }) {
  const note = JSON.parse(fs.readFile(`${id}.json`));
  return <NoteWithMarkdown note={note} />;
}

Limitations: no state or effects, no browser APIs, and props must be serializable.

Offscreen

Offscreen lets React keep a component’s state while removing its UI from the DOM, enabling features like Keep‑Alive or pre‑rendering. The component must be resilient to being mounted and unmounted repeatedly.

async function handleSubmit() {
  setPending(true);
  await post('/someapi');
  setPending(false);
}

When the component is unmounted during the async request, React 18’s Strict Mode will warn about potential memory leaks. Using an unmountRef to guard state updates is a common pattern.

New Hooks

useDeferredValue : defers a state value until there are no urgent updates.

useId : generates a stable unique ID that matches on server and client for safe hydration.

useSyncExternalStore : reads external stores safely in Concurrent Mode (used by state‑management libraries).

useInsertionEffect : runs before useLayoutEffect, intended for CSS‑in‑JS libraries to inject <style> tags.

Example of useDeferredValue replacing startTransition:

const [treeLeanInput, setTreeLeanInput] = useState(0);
const deferredValue = useDeferredValue(treeLeanInput);
function changeTreeLean(e) {
  setTreeLeanInput(Number(e.target.value));
}
return (
  <>
    <input type="range" value={treeLeanInput} onChange={changeTreeLean} />
    <Pythagoras lean={deferredValue} />
  </>
);

How to Upgrade to React 18

Upgrade your project’s react and react‑dom packages to version 18, replace ReactDOM.render with createRoot, and start using the new APIs described above. Detailed migration steps are available in the official React 18 release notes.