What is Concurrent React?

Learn that concurrent React can render in the background.

What is Concurrent React?

Concurrent React makes rendering interruptible. React can perform urgent updates immediately while preparing heavy updates in the background.

This enables filtering large lists or complex renders without blocking the main thread. The app does not freeze while the user types.

Concurrent features are used via useTransition and useDeferredValue.

Urgent and deferred updates

An update can be urgent (typing in an input) or deferred (filtering a list). React separates them: urgent runs immediately, deferred in the background.

With useTransition you mark an update as deferred. useDeferredValue delays the propagation of a value.

This separation keeps user input smooth. This way the app responds quickly.

Exercise Write the DataGrid component

Write DataGrid. Take an items prop. Inside a <table> with a <tbody> map items to <tr key={item.id}><td>{item.name}</td></tr>. Export it.

Show example solution

function DataGrid({ items }) {
  return (
    <table>
      <tbody>
        {items.map(item => (
          <tr key={item.id}><td>{item.name}</td></tr>
        ))}
      </tbody>
    </table>
  );
}
export default DataGrid;

Test yourself

What does Concurrent React enable?
- Smaller bundles
- Interruptible rendering
- TypeScript types
- CSS compilation
Show answer

Interruptible rendering — Rendering is interruptible; the main thread stays free.

Fill in the blank: start a transition

const [isPending, startTransition] = use____();

Show answer

const [isPending, startTransition] = useTransition();

Match concurrent concepts

useTransition

Deferred update
useDeferredValue

Delays a value
urgent update

Processed now
isPending

Pending state

Next lesson: useTransition

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies