Summary
Scheduler breaks render work into frames (~5ms slices) yielding to browser between slices. Prevents long renders from blocking input/paint. Large lists without virtualization still accumulate slice debt. Measure with Performance panel — long tasks during interaction indicate insufficient slicing or sync work on main thread.
Code example
import { useDeferredValue } from 'react';
function Results({ query }) {
const deferredQuery = useDeferredValue(query);
const list = useMemo(() => filterHuge(deferredQuery), [deferredQuery]);
return <List items={list} stale={deferredQuery !== query} />;
}
Key points
- Scheduler breaks render work into frames (~5ms slices) yielding to browser between slices.
- Prevents long renders from blocking input/paint.
- Large lists without virtualization still accumulate slice debt.
- Measure with Performance panel — long tasks during interaction indicate insufficient slicing or sync work on main thread.