Creación de un store personalizado con useSyncExternalStore

Un store personalizado necesita tres cosas: algún estado, un método subscribe para registrar listeners y un método getSnapshot para leer el estado actual. Ese es todo el contrato que espera useSyncExternalStore.

Mantener el store así de pequeño hace que no dependa de ningún framework, por lo que puede utilizarse tanto dentro como fuera de React.

Una fábrica createStore recibe un valor inicial y devuelve un objeto con getSnapshot, subscribe y un método update. Internamente mantiene el estado actual y un conjunto de callbacks de los listeners.

Este patrón de fábrica permite crear varios stores independientes con una sola función reutilizable.

Cuando update cambia el estado, establece el nuevo valor y después llama a todos los listeners registrados. Esos listeners son los callbacks que React proporcionó mediante subscribe.

Llamarlos indica a React que el store cambió, lo que hace que vuelva a leer getSnapshot y a renderizar los componentes que leen del store.

Un componente lee del store llamando a useSyncExternalStore con los métodos subscribe y getSnapshot del store. El hook devuelve el valor actual y vuelve a renderizar el componente cuando cambia.

Puede envolverlo en un hook personalizado como useStore para que los componentes llamen a una sola función en lugar de configurar los argumentos del hook cada vez.

Como el store es un objeto a nivel de módulo, cualquier componente que lo importe comparte el mismo estado, sin necesidad de un Context Provider. No hay que envolver ningún árbol ni pasar props a través de componentes intermedios.

Este es uno de los principales atractivos de los stores externos: estado global compartido con un modelo plano de importar y usar, en lugar de una jerarquía de Provider.

Puede crear varios stores pequeños, cada uno responsable de un slice del estado, en lugar de un único store monolítico. Los componentes se suscriben solo a los slices que les interesan.

Esto mantiene separadas las responsabilidades y limita los renderizados, ya que cambiar un slice nunca afecta a los componentes que leen de otro distinto.

Zustand, una popular biblioteca minimalista de estado, está construida exactamente sobre este patrón y utiliza useSyncExternalStore internamente desde la versión 4. Su pequeña API es, en esencia, un createStore perfeccionado con una capa de selectores.

Observar esta conexión permite entender mejor estas bibliotecas: son envoltorios ligeros y ergonómicos sobre la misma primitiva que usted puede construir por su cuenta.

Al pasar a getSnapshot un selector que devuelve únicamente la parte del estado que utiliza un componente, se asegura de que el componente vuelva a renderizarse solo cuando esa parte cambie.

Esto requiere que el resultado del selector sea estable, por lo que debe memorizar los valores derivados para evitar el bucle infinito causado por referencias nuevas y, al mismo tiempo, limitar las actualizaciones a la parte relevante.

Para depurar, puede asociar una etiqueta a un store y registrar las actualizaciones, o integrarlo con las herramientas de desarrollo del navegador para rastrear qué store cambió y cuándo.

Incluso un simple registro en la consola dentro de update, condicionado por una bandera de desarrollo, le ayuda a comprender el flujo del estado mientras construye el store.

Como el store es JavaScript sin ninguna abstracción adicional, puede probar su lógica directamente: llamar a update y comprobar que getSnapshot devuelve el nuevo valor, sin renderizar nada.

También puede probarlo dentro de React renderizando un componente que lo lea y comprobando que vuelva a renderizarse después de update, lo que cubre tanto el store como su integración.

Recuerde el contrato de un método subscribe de un store personalizado.

Un store personalizado necesita state, subscribe y getSnapshot. Una factory createStore junto con un update que notifique a los listeners proporciona un estado global compartido sin ningún Provider, ya que las importaciones de módulos comparten una única instancia.

Utilice varios stores para distintas partes del estado y selectors para limitar los renderizados, sin olvidar que las referencias deben ser estables. Zustand v4+ se basa exactamente en este patrón, y el store de JavaScript sin ninguna abstracción adicional es fácil de probar tanto dentro como fuera de React.