Optimizing Web Performance with React 18

React 18 introduced a foundational update to the core rendering model: Concurrency. This allows React to interrupt a long-running render to handle a high-priority event, like a user click or input.

Automatic Batching

In React 17 and earlier, updates inside promises, setTimeout, or native event handlers were not batched.

// React 17: Renders twice
setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
}, 1000);

// React 18: Renders once (auto-batched)
setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
}, 1000);

Suspense

Suspense lets you declaratively “wait” for something to load.

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

React 18 brings Suspense to the server (SSR), allowing for streaming HTML and progressive hydration.