What changed with concurrent rendering in React 18+ (batching, transitions)?
Take a moment.
Say your answer out loud or write it down first — retrieval is what makes it stick. Reveal when you're ready.
Short answer
React 18 added automatic batching across promises/timeouts/native handlers, concurrent rendering with priority via useTransition/useDeferredValue, and Suspense improvements. Updates can be interruptible so urgent input stays responsive while expensive renders proceed in the background.
Detailed explanation
Previously updates were batched only inside React event handlers; in React 18 automatic batching covers promises, setTimeout, native events too — multiple setStates collapse into one render everywhere. Concurrency is the bigger shift: React can prepare renders in the background, pause, abandon, or restart them without blocking user input. useTransition marks non-urgent updates (tab switches, filtering large lists) as transitionable — clicking stays snappy while the expensive list re-renders; isPending exposes in-progress status for spinners. useDeferredValue achieves similar results by deferring a value rather than wrapping the update. StrictMode now double-invokes effects and renders in development to surface unsafe patterns. Effects also fire once under concurrency assumptions, cementing the rule: render must stay pure, side effects belong in effects.
Official docs:React docs: useTransition
Example
function SearchResults({ query }) {
const [isPending, startTransition] = useTransition();
const [input, setInput] = useState(query);
const onChange = e => {
setInput(e.target.value); // urgent: input stays snappy
startTransition(() => {
setQuery(e.target.value); // non-urgent: big list render
});
};
return (<>
<input value={input} onChange={onChange} />
{isPending ? <Spinner /> : <HugeList query={query} />}
</>);
}Interview tip
Explain 'interruptible rendering' in one sentence, then pick useTransition and walk the urgent-vs-non-urgent split with the search example.
Common mistakes
- Describing concurrent mode as making renders multi-threaded.
- Not knowing what automatic batching expanded to cover in v18.