React
Explica cómo useTransition y useDeferredValue separan actualizaciones urgentes y no urgentes para mantener interacciones fluidas durante renderizados costosos.
Escribir en un input debe sentirse inmediato. Actualizar una visualización pesada puede marcarse como transición.
const [isPending, startTransition] = useTransition();
function handleTabChange(nextTab: string) {
startTransition(() => {
setTab(nextTab);
});
}React puede interrumpir y reiniciar el trabajo no urgente si aparece una actualización más importante.
const deferredQuery = useDeferredValue(query);
const results = <Results query={deferredQuery} />;El input usa query actual; la lista puede actualizarse con retraso y mantener contenido anterior.
Una transición prioriza renderizado. No establece un tiempo fijo ni reduce necesariamente peticiones de red. Para eso puede seguir siendo necesario debounce o cancelación.
Usa isPending para comunicar que el contenido se está actualizando sin bloquear la interacción.
Las actualizaciones de inputs controlados no deben marcarse como transición porque el valor visual debe seguir cada pulsación.
Transitions permiten que React priorice la respuesta directa del usuario sobre trabajo visual costoso.
React distingue entre una actualización que debe verse inmediatamente y otra cuyo render puede prepararse en segundo plano:
input / click urgente
↓
actualizar feedback inmediato
↓
trabajo no urgente en transition
↓
commit cuando esté listoUna transition no añade un delay fijo. Permite interrumpir y descartar renders obsoletos si aparece trabajo más urgente.
const [isPending, startTransition] = useTransition();
function handleTabChange(nextTab: Tab) {
startTransition(() => {
setActiveTab(nextTab);
});
}Los setters llamados sincrónicamente dentro de startTransition se marcan como no urgentes. Si haces await, los setters posteriores pueden necesitar otro startTransition según la versión y el flujo:
startTransition(async () => {
const data = await loadData();
startTransition(() => {
setData(data);
});
});Documenta el comportamiento de la versión objetivo y evita depender de detalles no verificados.
No marques el setter que controla el input:
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
const nextQuery = event.target.value;
setQuery(nextQuery); // urgente
startTransition(() => {
setFilterQuery(nextQuery); // resultados no urgentes
});
}El texto debe seguir cada pulsación. Los resultados pesados pueden retrasarse.
const deferredQuery = useDeferredValue(query);
const isStale = deferredQuery !== query;No necesitas un segundo setter. React mantiene temporalmente el valor anterior para el subárbol que lo consume.
<section aria-busy={isStale} style={{ opacity: isStale ? 0.6 : 1 }}>
<Results query={deferredQuery} />
</section>El estilo debe acompañarse de una señal accesible cuando el estado importe.
debounce
→ espera un tiempo
→ puede evitar requests o cálculos
transition/deferred
→ inicia o permite trabajo
→ cambia su prioridad
→ no garantiza menos requestsPara búsqueda remota puedes combinar:
Una actualización urgente que suspende puede reemplazar contenido visible por fallback. Una transition permite conservar la pantalla anterior mientras se prepara la siguiente:
startTransition(() => {
setRoute(nextRoute);
});isPending puede atenuar navegación o mostrar progreso sin borrar contexto.
Transitions también coordinan Actions y mutaciones en React moderno. isPending representa trabajo pendiente dentro de la transición, pero la consistencia de datos, errores e idempotencia siguen perteneciendo al flujo completo.
Varias transitions pueden solaparse. No asumas que cada isPending identifica una operación individual. Si necesitas distinguir uploads o filas concretas, modela identidad de operación además del estado global de transición.
Si renderizar una lista tarda varios segundos, transition puede mantener el input responsivo, pero el trabajo sigue consumiendo CPU. Reduce datos, virtualiza, optimiza algoritmos o mueve cálculo fuera del main thread.
Pending UI debería:
Si la interfaz continúa bloqueándose:
useDeferredValue conserva temporalmente un valor anterior.setQuery de un input en transition?use y recursos suspendibles explica cómo una lectura durante render activa Suspense bajo contratos compatibles.