useDeferredValue

Defers updating a part of the UI. During rapid updates (e.g., typing a -> ab -> abc), it keeps the deferred value on its previous state, skipping intermediate re-renders so the user input remains responsive. Once input pauses, React renders the UI with the latest value.

import { useState, useDeferredValue } from 'react';

export const MyComponent = () => {
    const [query, setQuery] = useState('');

    // Lagging copy that updates in background when main thread is clear
    const deferredQuery = useDeferredValue(query);

    return (
        <>
            <input value={query} onChange={(e) => setQuery(e.target.value)} />
            <HeavyList query={deferredQuery} />
        </>
    );
};