What is Concurrent Mode in React: Explanation and Example

Concurrent Mode in React is a set of new features that let React work on multiple tasks at the same time without blocking the user interface. It helps React keep the app responsive by interrupting and resuming work as needed using ReactDOM.createRoot and related APIs.

How It Works

Concurrent Mode lets React prepare multiple versions of the UI at once, like a chef prepping several dishes simultaneously instead of one after another. This means React can pause work on one update to handle a more urgent task, like responding to a user click, then come back to finish the first task later.

Under the hood, React breaks rendering into small units of work. It schedules these units so it can stop and start them without freezing the screen. This way, the app stays smooth and interactive even during complex updates.

Example

This example shows how to enable Concurrent Mode using ReactDOM.createRoot and how React can keep the UI responsive during a heavy update.

javascript

import React, { useState, useTransition } from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  function handleClick() {
    startTransition(() => {
      // Simulate a heavy update
      for (let i = 0; i < 1000000000; i++) {}
      setCount(c => c + 1);
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      {isPending ? <p>Loading...</p> : <p>Count: {count}</p>}
    </div>
  );
}

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

Output

Button labeled 'Increment' and text showing 'Count: 0'. When clicked, 'Loading...' appears briefly, then count increments smoothly without freezing the UI.

When to Use

Use Concurrent Mode when your React app has complex or slow updates that might freeze the screen, like large lists, animations, or data fetching. It helps keep the app feeling fast and responsive by letting React pause less important work to handle user input immediately.

For example, in a chat app, Concurrent Mode can let new messages appear smoothly while you type without delays. Or in a dashboard, it can update charts without blocking clicks.

Key Points

• Concurrent Mode allows React to work on multiple tasks at once without blocking the UI.
• It uses scheduling to pause and resume rendering smoothly.
• Enabled by using ReactDOM.createRoot and hooks like useTransition.
• Improves user experience in apps with heavy or slow updates.
• Still experimental in some React versions, so check compatibility.

Key Takeaways

Concurrent Mode helps React keep apps responsive by working on multiple tasks without blocking the UI.

It breaks rendering into small units that React can pause and resume as needed.

Enable it using ReactDOM.createRoot and hooks like useTransition.

Best for apps with heavy updates or complex UI to improve user experience.

Check React version support as Concurrent Mode features may be experimental.