useDeferredValue

React 🟡 Mid

Définition

Hook qui retourne une version différée d'une valeur, permettant a React de prioriser les mises a jour urgentes et de différer le re-rendu du contenu non critique.

Analogie

Comme un écho : ta voix (valeur originale) arrive d'abord, puis l'écho (valeur différée) suit avec un léger décalage.

Exemple de code

const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);

// L'input reste reactif, la liste se met a jour en differe
<input value={query} onChange={e => setQuery(e.target.value)} />
<HeavyList filter={deferredQuery} />

Cas d'usage

Alternative a useTransition quand tu ne contrôles pas le setter de l'état (props venant du parent).

Anti-pattern

Utiliser sur des valeurs primitives simples qui ne causent pas de rendu lourd.
#hooks#performance#react18

← → au clavier pour passer d'une fiche à l'autre