useTransition

const [isPending, startTransition] = useTransition()

• Reference
  • useTransition()
  • startTransition function
• Uso
  • Marcar una actualización de estado como transición no bloqueante
  • Actualización del componente principal en una transición
  • Visualización de un estado visual pendiente durante la transición
  • Evitar indicadores de carga no deseados
  • Construir un router con Suspense
• Solución de problemas
  • No funciona la actualización de una entrada en una transición
  • React no trata mi actualización de estado como una transición
  • Quiero llamar a useTransition desde fuera de un componente
  • La función que paso a startTransition se ejecuta inmediatamente

Reference

useTransition()

Llama a useTransition en el nivel superior de su componente para marcar algunas actualizaciones de estado como transiciones.

import { useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  // ...
}

Ver más ejemplos debajo.

Parámetros

useTransition no recibe ningun parámetro.

Devuelve

useTransition devuelve un array con exactamente dos elementos:

1. isPending que indica si hay una transición pendiente.
2. startTransition function que permite marcar una actualización de estado como una transición.

startTransition function

La función startTransition devuelta por useTransition permite marcar una actualización de estado como una transición.

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Parámetros

• scope: Una función que actualiza algún estado llamando a uno o varios set functions. React inmediatamente llamascope sin parámetros y marca todas las actualizaciones de estado programadas sincrónicamente durante el scope llamada de función como transiciones. Serán sin bloqueo y no mostrará indicadores de carga no deseados.

Devuelve

startTransition no devuelve nada.

Advertencias

• useTransition es un Gancho, por lo que sólo puede ser llamado dentro de componentes o Hooks personalizados. Si necesita iniciar una transición en otro lugar (por ejemplo, desde una biblioteca de datos), llame a la función independiente startTransition en su lugar.

• Puedes envolver una actualización en una transición sólo si tienes acceso a la función set de ese estado. Si desea iniciar una transición en respuesta a algunas prop o algún valor de un Hook personalizado, intente useDeferredValue en su lugar.

• La función que pases a startTransition debe ser síncrona. React ejecuta inmediatamente esta función, marcando como transiciones todas las actualizaciones de estado que se produzcan mientras se ejecuta. Si intentas realizar más actualizaciones de estado más tarde (por ejemplo, en un tiempo de espera), no se marcarán como transiciones.

• Una actualización de estado marcada como transición será interrumpida por otras actualizaciones de estado. Por ejemplo, si actualizas un componente gráfico dentro de una transición, pero luego empiezas a escribir en un input mientras el gráfico está en medio de un re-renderizado, React reiniciará el trabajo de renderizado en el componente gráfico después de gestionar la actualización del input.

• Las actualizaciones de transición no pueden utilizarse para controlar las entradas de texto.

• Si hay varias transiciones en curso, React las agrupa. Se trata de una limitación que probablemente se eliminará en una versión futura.

Uso

Marcar una actualización de estado como transición no bloqueante

Llama a useTransition en el nivel superior de tu componente para marcar las actualizaciones de estado como no bloqueantes. transitions.

import { useState, useTransition } from 'react';

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  // ...
}

useTransition devuelve un array con exactamente dos elementos:

1. isPending flag que le indica si hay una transición pendiente.
2. startTransition function que permite marcar una actualización de estado como una transición.

A continuación, puede marcar una actualización de estado como una transición de esta manera:

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Las transiciones permiten mantener la capacidad de respuesta de las actualizaciones de la interfaz de usuario incluso en dispositivos lentos.

Con una transición, la interfaz de usuario mantiene su capacidad de respuesta 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, puede hacerlo sin esperar a que termine la primera renderización.

Actualización del componente principal en una transición

También puedes actualizar el estado de un componente padre desde la llamada «useTransition». Por ejemplo, este componente TabButton envuelve su lógica onClick en una transición:

export default function TabButton({ children, isActive, onClick }) {
  const [isPending, startTransition] = useTransition();
  if (isActive) {
    return <b>{children}</b>
  }
  return (
    <button onClick={() => {
      startTransition(() => {
        onClick();
      });
    }}>
      {children}
    </button>
  );
}

Debido a que el componente padre actualiza su estado dentro del manejador de eventos onClick, esa actualización de estado se marca como una transición. Esta es la razón por la que, como en el ejemplo anterior, puedes hacer clic en «Posts» y luego inmediatamente hacer clic en «Contacto». La actualización de la pestaña seleccionada se marca como una transición, por lo que no bloquea las interacciones del usuario.

Visualización de un estado visual pendiente durante la transición

Puede utilizar el valor booleano isPending devuelto por useTransition para indicar al usuario que una transición está en curso. Por ejemplo, el botón de pestaña puede tener un estado visual especial «pendiente»:

function TabButton({ children, isActive, onClick }) {
  const [isPending, startTransition] = useTransition();
  // ...
  if (isPending) {
    return <b className="pending">{children}</b>;
  }
  // ...

Fíjate en que hacer clic en «Posts» ahora es más sensible porque el botón de la pestaña se actualiza inmediatamente:

Evitar indicadores de carga no deseados

En este ejemplo, el componente PostsTab obtiene algunos datos utilizando una fuente de datos Suspense-enabled. Al hacer clic en la pestaña «Posts», el componente PostsTab se suspende, haciendo que aparezca el fallback de carga más cercano:

Ocultar todo el contenedor de pestañas para mostrar un indicador de carga conduce a una experiencia de usuario discordante. Si añades useTransition a TabButton, puedes indicar que se muestre el estado pendiente en el botón de la pestaña.

Observa que al hacer clic en «Entradas» ya no se sustituye todo el contenedor de la pestaña por un spinner:

Más información sobre el uso de transiciones con Suspense.

Construir un router con Suspense

Si estás construyendo un framework React o un router, te recomendamos marcar las navegaciones de página como transiciones.

function Router() {
  const [page, setPage] = useState('/');
  const [isPending, startTransition] = useTransition();

  function navigate(url) {
    startTransition(() => {
      setPage(url);
    });
  }
  // ...

Esto se recomienda por dos razones:

• Las transiciones son interrumpibles, que permite al usuario hacer clic sin esperar a que se complete la nueva renderización.
• Las transiciones evitan indicadores de carga no deseados, que permite al usuario evitar saltos bruscos en la navegación.

He aquí un pequeño ejemplo de enrutador simplificado que utiliza transiciones para las navegaciones.

Solución de problemas

No funciona la actualización de una entrada en una transición

No se puede utilizar una transición para una variable de estado que controla una entrada:

const [text, setText] = useState('');
// ...
function handleChange(e) {
  // ❌ Can't use transitions for controlled input state
  startTransition(() => {
    setText(e.target.value);
  });
}
// ...
return <input value={text} onChange={handleChange} />;

Esto se debe a que las transiciones no se bloquean, pero la actualización de una entrada en respuesta al evento de cambio debe producirse de forma sincrónica. Si desea ejecutar una transición en respuesta a la escritura, tiene dos opciones:

1. Puedes declarar dos variables de estado separadas: una para el estado de la entrada (que siempre se actualiza de forma sincrónica), y otra que actualizarás en una transición. Esto te permite controlar la entrada utilizando el estado síncrono, y pasar la variable de estado de transición (que «irá por detrás» de la entrada) al resto de tu lógica de renderizado.
2. Alternativamente, puedes tener una variable de estado, y añadir useDeferredValue que «irá por detrás» del valor real. Se activarán re-renders no bloqueantes para «ponerse al día» con el nuevo valor de forma automática.

React no trata mi actualización de estado como una transición

Cuando envuelva una actualización de estado en una transición, asegúrese de que ocurre durante la llamada startTransition:

startTransition(() => {
  // ✅ Setting state *during* startTransition call
  setPage('/about');
});

La función que pases a startTransition debe ser síncrona.

No puedes marcar una actualización como una transición así:

startTransition(() => {
  // ❌ Setting state *after* startTransition call
  setTimeout(() => {
    setPage('/about');
  }, 1000);
});

En su lugar, podrías hacer esto:

setTimeout(() => {
  startTransition(() => {
    // ✅ Setting state *during* startTransition call
    setPage('/about');
  });
}, 1000);

Del mismo modo, no se puede marcar una actualización como una transición como esta:

startTransition(async () => {
  await someAsyncFunction();
  // ❌ Setting state *after* startTransition call
  setPage('/about');
});

Sin embargo, esto funciona en su lugar:

await someAsyncFunction();
startTransition(() => {
  // ✅ Setting state *during* startTransition call
  setPage('/about');
});

Quiero llamar a useTransition desde fuera de un componente

No puedes llamar a useTransition fuera de un componente porque es un Hook. En este caso, utiliza el método independiente startTransition. Funciona de la misma manera, pero no proporciona el indicador isPending.

La función que paso a startTransition se ejecuta inmediatamente

Si ejecutas este código, imprimirá 1, 2, 3:

console.log(1);
startTransition(() => {
  console.log(2);
  setPage('/about');
});
console.log(3);

Se espera que imprima 1, 2, 3. La función que pasas a startTransition no se retrasa. Al contrario que con el navegador setTimeout, no ejecuta el callback más tarde. React ejecuta tu función inmediatamente, pero cualquier actualización de estado programada mientras se está ejecutando se marca como transición. Puedes imaginar que funciona así:

// A simplified version of how React works

let isInsideTransition = false;

function startTransition(scope) {
  isInsideTransition = true;
  scope();
  isInsideTransition = false;
}

function setState() {
  if (isInsideTransition) {
    // ... schedule a transition state update ...
  } else {
    // ... schedule an urgent state update ...
  }
}