useDeferredValue: lista che resta reattiva

useDeferredValue restituisce una versione in ritardo di un valore: il testo digitato si vede subito, la lista che ne dipende si aggiorna quando il browser ha tempo. È il contrario di un debounce, perché non aspetta un timer.

La differenza da useTransition

useTransition decide quando parte un aggiornamento che controlli tu; useDeferredValue parte dal valore che hai già e non richiede di riscrivere il setter. Quando lo stato vive in un componente di terze parti, la seconda è l'unica opzione.

Il caso eseguibile

import { useDeferredValue, useMemo, useState } from "react";
import { ListaRighe } from "./ListaRighe";

export function Ricerca({ righe }) {
  const [testo, setTesto] = useState("");
  const differito = useDeferredValue(testo);
  const attesa = testo !== differito;

  const visibili = useMemo(
    () => righe.filter((r) => r.includes(differito)),
    [righe, differito],
  );

  return (
    
       setTesto(e.target.value)} />
      
    
  );
}

La lista legge il valore differito, l'input legge quello immediato. Il confronto fra i due valori accende l'indicatore di attesa senza uno stato in più, e sparisce da solo quando i due coincidono.

Perché serve la memo

Il valore differito evita il render della parte costosa solo se quella parte è memoizzata con memo. Senza memo il genitore si ridisegna, il figlio riceve props nuove e il lavoro pesante riparte comunque.

Record vivi nel catalogo

La categoria search raccoglie i campi di ricerca, con un command menu che filtra una lista; per un'attesa visibile c'è l'input di chat con stato di caricamento.

La limitazione

Non hai controllo sul ritardo: React decide in base al tempo disponibile, quindi non puoi promettere una risposta entro trecento millisecondi. Il valore differito non tocca la rete, non riduce il numero di richieste e non serve a niente su una lista non memoizzata.

Dove continuare

Le novità della versione sono in React 19, cosa cambia; la differenza con useTransition è in useTransition in pratica; le key nelle liste sono in il warning sulle key. Il confronto fra framework è in confronto framework frontend.