id	title	permalink	prev	next
concurrent-mode-patterns	Patrones concurrentes en interfaces de usuario (Experimental)	docs/concurrent-mode-patterns.html	concurrent-mode-suspense.html	concurrent-mode-adoption.html

Advertencia:

Esta página describía funcionalidades experimentales que aún no están disponibles en una versión estable. Estaba dirigida a usuarios pioneros y personas curiosas.

Una gran parte de la información disponible en esta página está desactualizada y existe solo por motivos de archivo. Por favor dirígete al artículo del anuncio de React 18 Alfa para obtener información actualizada.

Antes de que se lance React 18, reemplazaremos esta página con documentación estable.

Usualmente, cuando actualizamos el estado, esperamos ver los cambios en la pantalla inmediatamente. Esto tiene sentido, porque queremos que nuestra aplicación continúe respondiendo a la entrada del usuario. Sin embargo, hay casos en que quisiéramos postergar la aparición de una actualización en la pantalla.

Por ejemplo, si cambiamos de una página a otra, y ni nuestro código o datos para la próxima pantalla se han cargado, puede ser frustrante ver inmediatamente una página en blanco con un indicador de carga. Podemos preferir permanecer más tiempo en la pantalla anterior. La implementación de este patrón ha sido históricamente difícil con React. El Modo Concurrente ofrece un nuevo conjunto de herramientas para hacerlo.

Transiciones
Los tres pasos
Otros patrones
Próximos pasos

Transiciones {#transitions}

Revisitemos este demo de la página anterior acerca de Suspense para la carga de datos.

Cuando hacemos clic en el botón "Next" para cambiar el perfil activo, los datos de la página existente desaparecen inmediatamente y vemos el indicador de carga para todo la página nuevamente. Podemos llamar a esto un estado de carga "no deseable". Sería bueno si pudiéramos "saltárnoslo" y esperar a que cargue algún contenido antes de hacer la transición a la nueva pantalla.

React ofrece un nuevo Hook integrado llamado useTransition() para ayudar con esto.

Podemos usarlo en tres pasos.

Primero, nos aseguraremos de que estamos realmente usando el Modo Concurrente. Hablaremos más luego sobre como adoptar el Modo Concurrente, pero por ahora es suficiente saber que necesitamos utilizar ReactDOM.createRoot() en lugar de ReactDOM.render() para que esto funcione:

const rootElement = document.getElementById('root');
// Optar por el Modo Concurrente
ReactDOM.createRoot(rootElement).render(<App />);

A continuación, importaremos el Hook useTransition desde React:

import React, {useState, useTransition, Suspense} from 'react';

Para finalizar, lo utilizaremos dentro del componente App:

function App() {
  const [resource, setResource] = useState(initialResource);
  const [startTransition, isPending] = useTransition({
    timeoutMs: 3000
  });
  // ...

Por sí solo, este código no hace nada aún. Necesitaremos utilizar los valores de devolución de este Hook para establecer nuestra transición de estado. Hay dos valores devueltos por useTransition:

startTransition es una función. La usaremos para decirle a React qué actualización de estado queremos postergar.
isPending es un booleano. Es React diciéndonos si esa transición está ocurriendo actualmente.

Los usaremos debajo.

Nota que pasamos un objeto de configuración para useTransition. Su propiedad timeoutMs especifica *cuánto tiempo estamos dispuestos a esperar para que la transición termine**. Al pasar {timeoutMs: 3000} estamos diciendo: "Si el próximo perfil toma más de 3 segundos en cargar, muestra este gran spinner, pero antes de ese tiempo está bien seguir mostrando la pantalla anterior".

Envolver setState en una transición {#wrapping-setstate-in-a-transition}

Nuestro controlador de evento del clic del botón "Next" realiza la actualización que cambia el perfil actual en el estado:

<button
  onClick={() => {
    const nextUserId = getNextId(resource.userId);
    setResource(fetchProfileData(nextUserId));
  }}
>

Envolveremos esa actualización del estado en startTransition. De esa forma le decimos a React que no nos importa que demore la actualización del estado si conduce a un estado de carga no deseable:

<button
  onClick={() => {
    startTransition(() => {
      const nextUserId = getNextId(resource.userId);
      setResource(fetchProfileData(nextUserId));
    });
  }}
>

Files

concurrent-mode-patterns.md

Latest commit

History

concurrent-mode-patterns.md

File metadata and controls

Transiciones {#transitions}

Envolver setState en una transición {#wrapping-setstate-in-a-transition}

Añadir un indicador de espera {#adding-a-pending-indicator}

Revisión de los cambios {#reviewing-the-changes}

¿Cuándo ocurre la actualización? {#where-does-the-update-happen}

Las transiciones están en todos lados {#transitions-are-everywhere}

Incorporar las transiciones en el sistema de diseño {#baking-transitions-into-the-design-system}

Los tres pasos {#the-three-steps}

Predeterminado: Retirado → Esqueleto → Completado {#default-receded-skeleton-complete}

Preferido: Pendiente → Esqueleto → Completado {#preferred-pending-skeleton-complete}

Envolver funcionalidad diferida en <Suspense> {#wrap-lazy-features-in-suspense}

"Tren" de revelación de Suspense {#suspense-reveal-train}

Demora de un indicador de estado Pendiente {#delaying-a-pending-indicator}

Recapitulación {#recap}

Otros patrones {#other-patterns}

Separación del estado de alta y baja prioridad {#splitting-high-and-low-priority-state}

Postergar un valor {#deferring-a-value}

SuspenseList {#suspenselist}

Próximos pasos {#next-steps}

Envolver funcionalidad diferida en `<Suspense>` {#wrap-lazy-features-in-suspense}