# useDeferredValue: a list that stays responsive

useDeferredValue returns a lagging copy of a value: the field stays immediate and the heavy list updates when there is time.

> Page: https://ui.eneawork.it/blog/react-deferred-value
> Markdown: https://ui.eneawork.it/blog/react-deferred-value.md

*2026-11-01*

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.

Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati da /api/stats il 1 novembre 2026. La cifra viene da una query all'endpoint, non da una stima: conta i record pubblicati, non la qualità dei componenti.

## 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.

## FAQ

### useDeferredValue sostituisce un debounce?

No. Un debounce aspetta un intervallo fisso prima di aggiornare; useDeferredValue non aspetta nulla e lascia a React la scelta del momento.

### Perché la lista resta lenta?

Perché il componente della lista non è memoizzato, oppure perché il filtro viene ricalcolato a ogni render. Avvolgi la lista in memo e il calcolo in useMemo.

### Il valore differito è sempre diverso da quello reale?

No, coincidono appena React completa il render differito. Il confronto fra i due è vero solo mentre l'aggiornamento è in coda.

### Posso passare un secondo argomento?

Sì, in React 19 il secondo argomento è il valore iniziale usato al primo render. Serve quando il valore arriva da fuori e vuoi evitare un primo render con dati vecchi.

### Serve per le richieste di rete?

No. useDeferredValue lavora sul render, non sulle richieste: per la rete servono cache, annullamento e una libreria dati.