El problema de las suscripciones a stores externos

Un store externo es cualquier fuente de estado que vive fuera del árbol de React, como un store de Redux, una API del navegador como matchMedia o un objeto sencillo a nivel de módulo con su propio mecanismo de suscripción mediante subscribe.

React no administra este estado, por lo que debe suscribirse a los cambios y leer snapshots para mantener los componentes sincronizados con lo que el store contiene en cada momento.

Un enfoque habitual consiste en leer el valor del store en useState y utilizar después useEffect para suscribirse y llamar a setState cada vez que cambia el store. A primera vista, parece mantener actualizado el componente.

Funciona con un renderizado síncrono sencillo, pero tiene un defecto sutil que se hace visible cuando React renderiza de forma concurrente y puede pausar o reiniciar el trabajo a mitad del proceso.

El tearing ocurre cuando distintas partes de la interfaz muestran valores diferentes del mismo store durante una única pasada de renderizado. El renderizado concurrente puede interrumpir y reanudar el trabajo, y el store puede cambiar mientras tanto.

El resultado es una pantalla incoherente en la que un componente muestra el valor anterior y otro el nuevo, una inconsistencia que antes de las funcionalidades concurrentes era prácticamente imposible.

Imagine muchos componentes leyendo un store del tema mientras React renderiza de forma concurrente. Si el usuario activa el modo oscuro a mitad del proceso, los componentes renderizados antes del cambio muestran el tema claro y los posteriores muestran el oscuro.

Durante un frame, la pantalla queda mitad clara y mitad oscura porque el valor del store cambió durante un renderizado que React no trató como una operación atómica.

Los efectos se ejecutan después de confirmar el renderizado, por lo que una suscripción basada en useEffect no puede garantizar que el valor leído durante el renderizado coincida con el store en el momento de confirmarlo. La suscripción se activa demasiado tarde para evitar un pintado incoherente.

Cuando el efecto vuelve a suscribirse y actualiza el estado, es posible que el frame incoherente ya se haya mostrado al usuario.

Una API experimental anterior llamada useMutableSource intentó resolver las lecturas seguras de fuentes externas durante el renderizado concurrente, pero su API resultó difícil de utilizar correctamente y nunca se publicó como estable.

El equipo de React la sustituyó por una primitiva más sencilla y ergonómica que ofrece las mismas garantías de coherencia sin sus aspectos problemáticos.

useSyncExternalStore es el hook oficial para suscribirse a stores externos de forma segura durante el renderizado concurrente. Se coordina con React para que las lecturas sean coherentes en todo el renderizado y los componentes nunca sufran tearing.

Se convirtió en la primitiva recomendada para los autores de bibliotecas que necesitan integrar de forma fiable el estado externo en React durante el renderizado concurrente.

Las bibliotecas de estado que se suscriben a stores externos se vieron directamente afectadas, entre ellas Redux, MobX y Valtio. Cada una tuvo que adoptar la nueva primitiva para seguir siendo segura cuando se incorporaron las funcionalidades concurrentes.

Por eso sus bindings de React se actualizaron para llamar internamente a useSyncExternalStore en lugar de depender del patrón anterior de useState más useEffect.

El hook garantiza que todos los componentes que leen el store durante un renderizado vean la misma instantánea y fuerza un renderizado síncrono si el store cambia de una forma que, de otro modo, provocaría tearing.

Esta combinación de una instantánea coherente y seguridad en renderizado concurrente es el valor fundamental que ofrece el hook frente a las suscripciones implementadas manualmente.

Al usar useSyncExternalStore, sus suscripciones siguen siendo correctas a medida que React evoluciona su modelo de renderizado. Usted adopta las garantías del framework en lugar de reimplementarlas de forma imperfecta.

Esto lo convierte en la forma duradera y recomendada de conectar cualquier fuente de verdad externa con componentes de React.

Confirme qué significa tearing en el renderizado concurrente.

Los stores externos viven fuera de React, y la suscripción ingenua basada en useState más useEffect no puede evitar el tearing cuando el renderizado es concurrente. Los efectos se ejecutan demasiado tarde para mantener coherentes las lecturas dentro de un renderizado.

useSyncExternalStore reemplaza a useMutableSource, que quedó abandonado, y ofrece una instantánea coherente con seguridad en renderizado concurrente. Bibliotecas como Redux, MobX y Valtio lo adoptaron como la primitiva preparada para el futuro para las suscripciones a stores.