What is concurrent rendering in React?

Concurrent Rendering in React is a foundational update that allows React to prepare multiple versions of your UI at the same time and interrupt rendering work to respond to user interactions, making applications feel more responsive and performant.

What is Concurrent Rendering?

Traditionally, React rendered updates synchronously. Once rendering started, it couldn't be interrupted until the entire update was processed and committed to the DOM. This 'all or nothing' approach could lead to janky user experiences, especially with large or complex updates that blocked the main thread.

Concurrent rendering introduces a new paradigm where React can pause, interrupt, and resume rendering work. It allows React to work on multiple tasks 'concurrently' (even if they are still executed on a single thread) by yielding control back to the browser periodically, enabling the browser to process high-priority events like user input.

Key Principles and Benefits

• Interruptible Rendering: React can stop rendering a low-priority update if a higher-priority update (like a user click or typing) comes in. Once the urgent update is handled, React can resume the interrupted work.
• Prioritization: Different updates can be assigned different priorities. Urgent updates (e.g., typing into an input) can preempt less urgent ones (e.g., fetching data and rendering a large list).
• Non-Blocking Updates: By breaking down work into smaller units and yielding to the browser, concurrent rendering ensures that long rendering tasks don't freeze the UI, maintaining responsiveness.
• UI Responsiveness: The primary goal is to ensure that the UI remains interactive even when complex updates are being processed in the background.
• Simultaneous Preparation: React can prepare multiple versions of the UI simultaneously in memory. For instance, it can start rendering a new screen while the user is still interacting with the current one, then seamlessly switch when ready.

How it Works (High-Level)

At its core, concurrent rendering leverages a sophisticated scheduler. Instead of directly applying updates, React's reconciler (Fiber architecture) creates a 'work-in-progress' tree. This work is broken down into small units (Fibers) that can be processed incrementally.

During a rendering pass, after processing a small chunk of work, React can check if there's any higher-priority work pending or if it has exceeded its allocated time slice. If so, it can pause the current work and yield control back to the browser. When it gets control back, it can resume the paused work or start new, higher-priority work.

Impact on Developers

While concurrent rendering is an internal implementation detail, React provides hooks that allow developers to opt into concurrent features and manage priorities. The most notable are useTransition and useDeferredValue.

Example: useTransition

useTransition allows you to mark a state update as a 'transition', meaning it's non-urgent and can be interrupted. This is useful for navigations or large data fetches where you want to keep the UI responsive while the background work completes.

import React, { useState, useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('posts');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <div>
      <button onClick={() => selectTab('posts')}>Posts</button>
      <button onClick={() => selectTab('comments')}>Comments</button>
      {isPending && <p>Loading...</p>}
      {tab === 'posts' ? <Posts /> : <Comments />}
    </div>
  );
}

function Posts() { /* ... large component ... */ return <p>Posts content</p>; }
function Comments() { /* ... large component ... */ return <p>Comments content</p>; }

Example: useDeferredValue

useDeferredValue allows you to defer updating a value, prioritizing more urgent updates. It's often used for things like search inputs where you want to update the input immediately, but defer filtering a large list until the user pauses typing or the browser is idle.

import React, { useState, useDeferredValue, useMemo } from 'react';

function SearchInput() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  // This list will re-render with the deferredQuery, allowing the input to update immediately.
  const filteredItems = useMemo(() => {
    // Simulate a heavy filtering operation
    const largeList = Array.from({ length: 10000 }, (_, i) => `item-${i} for query ${query}`);
    return largeList.filter(item => item.includes(deferredQuery));
  }, [deferredQuery]);

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      {/* Render filteredItems based on deferredQuery */}
      <ul>
        {filteredItems.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

Conclusion

Concurrent rendering is a significant step forward for React, moving it from a synchronous, blocking rendering model to an asynchronous, interruptible one. It empowers developers to build highly responsive user interfaces, automatically handling complex prioritization scenarios that were previously difficult to manage manually, ultimately leading to a smoother and more delightful user experience.