useDeferredValue

React 🟡 Mid

Definition

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

Analogie

Comme un echo : ta voix (valeur originale) arrive d'abord, puis l'echo (valeur differee) suit avec un leger decalage.

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 controles pas le setter de l'etat (props venant du parent).

Anti-pattern

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