startTransition
startTransition
permite actualizar el estado sin bloquear la UI.
startTransition(scope)
Referencia
startTransition(scope)
La función startTransition
te permite marcar una actualización de estado como una Transición.
import { startTransition } from 'react';
function TabContainer() {
const [tab, setTab] = useState('acerca de');
function selectTab(nextTab) {
startTransition(() => {
setTab(nextTab);
});
}
// ...
}
Parámetros
scope
: Una función que actualiza algún estado llamando a una o más funcionesset
. React llama inmediatamente ascope
sin argumentos y marca todas las actualizaciones de estado programadas de forma síncrona durante la llamada a la funciónscope
como Transiciones. Estas serán sin bloqueo y no mostrarán indicadores de carga no deseados.
Devuelve
startTransition
no devuelve nada.
Advertencias
-
startTransition
no proporciona una forma de rastrear si hay una Transición pendiente. Para mostrar un indicador pendiente mientras se produce la Transición, debes utilizaruseTransition
en su lugar. -
Solo puedes envolver una actualización en una Transición si tienes acceso a la función
set
de ese estado. Si deseas iniciar una Transición en respuesta a alguna prop o un valor de devolución de un Hook personalizado, intenta usaruseDeferredValue
en su lugar. -
La función que pasas a
startTransition
debe ser sincrónica. React ejecuta inmediatamente esta función, marcando todas las actualizaciones de estado que ocurren mientras se ejecuta como Transiciones. Si intentas realizar más actualizaciones de estado más tarde (por ejemplo, en un timeout), no se marcarán como Transiciones. -
Una actualización de estado marcada como una Transición será interrumpida por otras actualizaciones de estado. Por ejemplo, si actualizas un componente de gráfico dentro de una Transición, pero luego comienzas a escribir en una entrada de texto mientras el gráfico está en medio de una rerenderización, React reiniciará el trabajo de renderizado en el componente de gráfico después de manejar la actualización de estado de la entrada de texto.
-
Las actualizaciones de Transición no se pueden utilizar para controlar entradas de texto.
-
Si hay varias Transiciones en curso, React actualmente las agrupa. Esta es una limitación que probablemente se eliminará en una versión futura.
Uso
Marcar una actualización de estado como una Transición sin bloqueo
Puedes marcar una actualización de estado como una Transición envolviéndola en una llamada startTransition
:
import { startTransition } from 'react';
function TabContainer() {
const [tab, setTab] = useState('acerca de');
function selectTab(nextTab) {
startTransition(() => {
setTab(nextTab);
});
}
// ...
}
Las Transiciones te permiten mantener la actualización de la interfaz de usuario receptiva incluso en dispositivos lentos.
Con una Transición, tu interfaz de usuario sigue siendo receptiva en medio de una nueva renderización. Por ejemplo, si el usuario hace clic en una pestaña pero luego cambia de opinión y hace clic en otra pestaña, puede hacerlo sin esperar a que termine la primera renderización.