What is Concurrent React?
- React course
- Expert
- Lesson 13/32
- 4 min
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.
Practice 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.
Starter code
// Write the DataGrid component hereSample solution
function DataGrid({ items }) {
return (
<table>
<tbody>
{items.map(item => (
<tr key={item.id}><td>{item.name}</td></tr>
))}
</tbody>
</table>
);
}
export default DataGrid;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does Concurrent React enable?
- Smaller bundles
- Interruptible rendering Correct answer
- TypeScript types
- CSS compilation
Explanation: Rendering is interruptible; the main thread stays free.
2 Fill in the blank: start a transition
const [isPending, startTransition] = use____();const [isPending, startTransition] = useTransition();Explanation: useTransition starts a transition.
3 Match concurrent concepts
| Term | Meaning |
|---|---|
useTransition |
Deferred update |
useDeferredValue |
Delays a value |
urgent update |
Processed now |
isPending |
Pending state |