startTransition

startTransition(scope)

• Referencia
  • startTransition(scope)
• Uso
  • Marcar una actualización de estado como una transición sin bloqueo

Referencia

startTransition(scope)

La función startTransition le 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);
    });
  }
  // ...
}

Ver más ejemplos a continuación.

Parámetros

• scope: Una función que actualiza algún estado llamando a una o más funciones set. React llama inmediatamente a scope sin parámetros y marca todas las actualizaciones de estado programadas de forma síncrona durante la llamada a la función scope como transiciones. Estas serán sin bloqueo y no mostrarán indicadores de carga no deseados.

Returns

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, debe utilizar useTransition en su lugar.

• Solo puede envolver una actualización en una transición si tiene acceso a la función set de ese estado. Si desea iniciar una transición en respuesta a alguna propiedad o un valor de retorno personalizado de Hook, intente usar useDeferredValue en su lugar.

• La función que pasa 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 intenta 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 actualiza un componente de gráfico dentro de una transición, pero luego comienza a escribir en una entrada mientras el gráfico está en medio de una re-renderización, React reiniciará el trabajo de renderizado en el componente de gráfico después de manejar la actualización de estado de entrada.

• 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

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