Master React 18: Unlock Concurrent Mode, Automatic Batching, Streaming SSR and New Hooks

Concurrent Mode

Concurrent Mode (CM) is a low‑level design that lets React prepare multiple UI versions simultaneously, pausing lower‑priority updates when higher‑priority work arrives, similar to OS multitasking.

In CM, React checks after each Fiber execution for higher‑priority updates; if found, the current work is paused and resumed later.

For most developers, CM is invisible—upgrading to React 18 does not require code changes—but it powers features like Suspense , Transitions , and streaming SSR.

startTransition

To explicitly mark non‑urgent updates, use startTransition. React classifies updates as:

Urgent updates (e.g., typing, clicking) that must render immediately.

Transition updates (e.g., view changes) that can be deferred.

Example:

const [inputValue, setInputValue] = useState();
const onChange = (e) => {
  setInputValue(e.target.value); // urgent
  setSearchQuery(e.target.value); // non‑urgent
};
return (<input value={inputValue} onChange={onChange} />);

Wrap the non‑urgent state change with startTransition:

startTransition(() => {
  setSearchQuery(input);
});

Automatic Batching

React 18 batches all state updates, regardless of context, reducing renders. Example before React 18:

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

After React 18, the same code results in a single render.

When you need to force synchronous updates, use flushSync.

Streaming Server‑Side Rendering (SSR)

Traditional SSR renders the whole page sequentially. React 18 introduces streaming SSR with Suspense, allowing the server to send parts of the HTML as they become ready.

Example layout:

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

The server initially returns the markup without Comments, showing a spinner. When Comments finishes loading, the server streams the content and replaces the placeholder on the client.

Server Components

Server Components run on the server and send a lightweight DSL to the client, eliminating client‑side bundle size for those components. They have full Node.js access but cannot use state, effects, or browser APIs.

Example:

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

OffScreen (in development)

OffScreen preserves component state while removing its UI, enabling patterns like Keep‑Alive or pre‑rendering. Components must be resilient to being mounted and unmounted repeatedly.

Typical memory‑leak warnings arise from updating state after unmount; using an unmountRef or cleaning up async tasks prevents this.

New Hooks in React 18

useDeferredValue

: defers a value until there are no urgent updates, similar to startTransition. useId: generates a stable unique ID that matches on server and client, avoiding hydration mismatches. useSyncExternalStore: safely reads external stores (e.g., Redux) in Concurrent Mode. useInsertionEffect: runs before useLayoutEffect, intended for CSS‑in‑JS libraries to inject