El React concurrente puede interrumpir, pausar y priorizar el trabajo de renderizado. Marcas algunas actualizaciones como transiciones no urgentes para que las actualizaciones urgentes (como escribir) sigan respondiendo, incluso mientras hay un re-render pesado pendiente.
[isPending, startTransition] = ();
() {
(e..);
( {
((e..));
});
}
Por qué ayuda: filtrar una lista enorme es costoso. Sin una transición, React bloquearía la entrada mientras vuelve a renderizar miles de filas, así que escribir se sentiría con retraso. Al envolver la actualización costosa en startTransition, React mantiene las actualizaciones de la entrada con alta prioridad y puede descartar un render de filtrado en progreso si pulsas otra tecla — sin frames obsoletos ni entrecortados.
Una alternativa más simple cuando no controlas el setter — te da una copia "rezagada" de un valor:
const deferredQuery = useDeferredValue(query); // updates after urgent work settles
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
Usa estas funciones para actualizaciones de interfaz costosas y no urgentes impulsadas por entradas rápidas del usuario: búsqueda mientras se escribe sobre grandes conjuntos de datos, cambios de pestaña que renderizan contenido pesado, tablas grandes filtradas u ordenadas. Para aplicaciones simples son innecesarias — brillan cuando un render es lo bastante pesado como para causar un retraso visible en la entrada.
Las funciones concurrentes te permiten mantener una interfaz fluida bajo cargas de renderizado pesadas, priorizando la capacidad de respuesta a la entrada del usuario por encima del trabajo no urgente — algo imposible con el renderizado síncrono tradicional.