React useSyncExternalStore: Dominando la Integración del Estado Externo

El hook useSyncExternalStore de React, introducido en React 18, proporciona una forma potente y eficiente de integrar fuentes de datos externas y bibliotecas de gestión de estado en tus componentes de React. Este hook permite a los componentes suscribirse a cambios en almacenes (stores) externos, asegurando que la interfaz de usuario siempre refleje los datos más recientes mientras se optimiza el rendimiento. Esta guía ofrece una visión completa de useSyncExternalStore, cubriendo sus conceptos básicos, patrones de uso y mejores prácticas.

Entendiendo la Necesidad de useSyncExternalStore

En muchas aplicaciones de React, te encontrarás con escenarios donde el estado necesita ser gestionado fuera del árbol de componentes. Este es a menudo el caso al tratar con:

• Bibliotecas de terceros: Integración con bibliotecas que gestionan su propio estado (p. ej., una conexión a base de datos, una API del navegador o un motor de físicas).
• Estado compartido entre componentes: Gestionar estado que necesita ser compartido entre componentes que no están directamente relacionados (p. ej., estado de autenticación de usuario, configuraciones de la aplicación o un bus de eventos global).
• Fuentes de datos externas: Obtener y mostrar datos de APIs o bases de datos externas.

Las soluciones tradicionales de gestión de estado como useState y useReducer son adecuadas para gestionar el estado local de los componentes. Sin embargo, no están diseñadas para manejar el estado externo de manera eficaz. Usarlas directamente con fuentes de datos externas puede llevar a problemas de rendimiento, actualizaciones inconsistentes y código complejo.

useSyncExternalStore aborda estos desafíos proporcionando una forma estandarizada y optimizada de suscribirse a cambios en almacenes externos. Asegura que los componentes se vuelvan a renderizar solo cuando los datos relevantes cambian, minimizando actualizaciones innecesarias y mejorando el rendimiento general.

Conceptos Fundamentales de useSyncExternalStore

useSyncExternalStore toma tres argumentos:

1. subscribe: Una función que toma un callback como argumento y se suscribe al almacén externo. El callback se llamará cada vez que los datos del almacén cambien.
2. getSnapshot: Una función que devuelve una instantánea (snapshot) de los datos del almacén externo. Esta función debe devolver un valor estable que React pueda usar para determinar si los datos han cambiado. Debe ser pura y rápida.
3. getServerSnapshot (opcional): Una función que devuelve el valor inicial del almacén durante el renderizado en el lado del servidor. Esto es crucial para asegurar que el HTML inicial coincida con el renderizado en el lado del cliente. Se usa ÚNICAMENTE en entornos de renderizado del lado del servidor. Si se omite en un entorno del lado del cliente, utiliza getSnapshot en su lugar. Es importante que este valor nunca cambie después de ser renderizado inicialmente en el lado del servidor.

Aquí hay un desglose de cada argumento:

1. subscribe

La función subscribe es responsable de establecer una conexión entre el componente de React y el almacén externo. Recibe una función de callback, a la cual debe llamar cada vez que los datos del almacén cambien. Este callback se utiliza típicamente para desencadenar un nuevo renderizado del componente.

Ejemplo:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

En este ejemplo, store.addListener añade el callback a la lista de listeners del almacén. La función devuelve una función de limpieza que elimina el listener cuando el componente se desmonta, previniendo fugas de memoria.

2. getSnapshot

La función getSnapshot es responsable de obtener una instantánea de los datos del almacén externo. Esta instantánea debe ser un valor estable que React pueda usar para determinar si los datos han cambiado. React utiliza Object.is para comparar la instantánea actual con la anterior. Por lo tanto, debe ser rápida y se recomienda encarecidamente que devuelva un valor primitivo (cadena, número, booleano, nulo o indefinido).

Ejemplo:

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

En este ejemplo, store.getData devuelve los datos actuales del almacén. React comparará este valor con el valor anterior para determinar si el componente necesita volver a renderizarse.

3. getServerSnapshot (Opcional)

La función getServerSnapshot solo es relevante cuando se utiliza el renderizado del lado del servidor (SSR). Esta función se llama durante el renderizado inicial del servidor, y su resultado se utiliza como el valor inicial del almacén antes de que ocurra la hidratación en el cliente. Devolver valores consistentes es crítico para un SSR exitoso.

Ejemplo:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

En este ejemplo, `store.getInitialDataForServer` devuelve los datos iniciales apropiados para el renderizado del lado del servidor.

Ejemplo de Uso Básico

Consideremos un ejemplo simple donde tenemos un almacén externo que gestiona un contador. Podemos usar useSyncExternalStore para mostrar el valor del contador en un componente de React:

            // Almacén externo
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// Componente de React
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

En este ejemplo, createStore crea un almacén externo simple que gestiona el valor de un contador. El componente Counter utiliza useSyncExternalStore para suscribirse a los cambios en el almacén y mostrar la cuenta actual. Cuando se hace clic en el botón de incrementar, la función setState actualiza el valor del almacén, lo que desencadena un nuevo renderizado del componente.

Integración con Bibliotecas de Gestión de Estado

useSyncExternalStore es particularmente útil para la integración con bibliotecas de gestión de estado como Zustand, Jotai y Recoil. Estas bibliotecas proporcionan sus propios mecanismos para gestionar el estado, y useSyncExternalStore te permite integrarlas sin problemas en tus componentes de React.

Aquí hay un ejemplo de integración con Zustand:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Almacén de Zustand
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// Componente de React
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand simplifica la creación del almacén. Sus implementaciones internas de subscribe y getSnapshot se utilizan implícitamente cuando te suscribes a un estado en particular.

Aquí hay un ejemplo de integración con Jotai:

            import { atom, useAtom } from 'jotai'

// Átomo de Jotai
const countAtom = atom(0)

// Componente de React
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai utiliza átomos para gestionar el estado. useAtom maneja internamente la suscripción y la captura de instantáneas.

Optimización del Rendimiento

useSyncExternalStore proporciona varios mecanismos para optimizar el rendimiento:

• Actualizaciones Selectivas: React solo vuelve a renderizar el componente cuando el valor devuelto por getSnapshot cambia. Esto asegura que se eviten renderizados innecesarios.
• Agrupación de Actualizaciones (Batching): React agrupa las actualizaciones de múltiples almacenes externos en un solo re-renderizado. Esto reduce el número de re-renderizados y mejora el rendimiento general.
• Evitar Closures Obsoletos: useSyncExternalStore asegura que el componente siempre tenga acceso a los datos más recientes del almacén externo, incluso cuando se trata de actualizaciones asíncronas.

Para optimizar aún más el rendimiento, considera las siguientes mejores prácticas:

• Minimiza la cantidad de datos devueltos por getSnapshot: Solo devuelve los datos que el componente realmente necesita. Esto reduce la cantidad de datos que necesitan ser comparados y mejora la eficiencia del proceso de actualización.
• Usa técnicas de memoización: Memoiza los resultados de cálculos costosos o transformaciones de datos. Esto puede prevenir re-cálculos innecesarios y mejorar el rendimiento.
• Evita suscripciones innecesarias: Solo suscríbete al almacén externo cuando el componente esté realmente visible. Esto puede reducir el número de suscripciones activas y mejorar el rendimiento general.
• Asegúrate de que getSnapshot devuelva un nuevo objeto *estable* solo si los datos han cambiado: Evita crear nuevos objetos/arreglos/funciones si los datos subyacentes no han cambiado realmente. Devuelve el mismo objeto por referencia si es posible.

Renderizado del Lado del Servidor (SSR) con useSyncExternalStore

Cuando se utiliza useSyncExternalStore con renderizado del lado del servidor (SSR), es crucial proporcionar una función getServerSnapshot. Esta función asegura que el HTML inicial renderizado en el servidor coincida con el renderizado del lado del cliente, evitando errores de hidratación y mejorando la experiencia del usuario.

Aquí hay un ejemplo de uso de getServerSnapshot:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Importante para SSR

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// Componente de React
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

En este ejemplo, getServerSnapshot devuelve el valor inicial del contador. Esto asegura que el HTML inicial renderizado en el servidor coincida con el renderizado del lado del cliente. El getServerSnapshot debe devolver un valor estable y predecible. También debe realizar la misma lógica que la función getSnapshot en el servidor. Evita acceder a APIs específicas del navegador o variables globales en getServerSnapshot.

Patrones de Uso Avanzados

useSyncExternalStore puede ser utilizado en una variedad de escenarios avanzados, incluyendo:

• Integración con APIs del Navegador: Suscribirse a cambios en APIs del navegador como localStorage o navigator.onLine.
• Creación de Hooks Personalizados: Encapsular la lógica para suscribirse a un almacén externo en un hook personalizado.
• Uso con la API de Contexto: Combinar useSyncExternalStore con la API de Contexto de React para proporcionar estado compartido a un árbol de componentes.

Veamos un ejemplo de cómo crear un hook personalizado para suscribirse a localStorage:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error getting value from localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Dispara manualmente el evento 'storage' para actualizaciones en la misma página
    } catch (error) {
      console.error("Error setting value in localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

  const storedValue = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

En este ejemplo, useLocalStorage es un hook personalizado que se suscribe a los cambios en localStorage. Utiliza useSyncExternalStore para gestionar la suscripción y obtener el valor actual de localStorage. También despacha correctamente un evento de almacenamiento para asegurar que las actualizaciones en la misma página se reflejen (ya que los eventos `storage` solo se disparan en otras pestañas). El serverSnapshot asegura que los valores iniciales se proporcionen correctamente en entornos de servidor.

Mejores Prácticas y Errores Comunes

Aquí hay algunas mejores prácticas y errores comunes a evitar al usar useSyncExternalStore:

• Evita mutar el almacén externo directamente: Utiliza siempre la API del almacén para actualizar los datos. Mutar el almacén directamente puede llevar a actualizaciones inconsistentes y comportamiento inesperado.
• Asegúrate de que getSnapshot sea puro y rápido: getSnapshot no debe tener efectos secundarios y debe devolver un valor estable rápidamente. Los cálculos costosos o las transformaciones de datos deben ser memoizados.
• Proporciona una función getServerSnapshot al usar SSR: Esto es crucial para asegurar que el HTML inicial renderizado en el servidor coincida con el renderizado del lado del cliente.
• Maneja los errores con elegancia: Usa bloques try-catch para manejar errores potenciales al acceder al almacén externo.
• Limpia las suscripciones: Siempre desuscríbete del almacén externo cuando el componente se desmonte para prevenir fugas de memoria. La función subscribe debe devolver una función de limpieza que elimine el listener.
• Comprende las implicaciones de rendimiento: Aunque useSyncExternalStore está optimizado para el rendimiento, es importante entender el impacto potencial de suscribirse a almacenes externos. Minimiza la cantidad de datos devueltos por getSnapshot y evita suscripciones innecesarias.
• Prueba a Fondo: Asegúrate de que la integración con el almacén funcione correctamente en diferentes escenarios, especialmente en renderizado del lado del servidor y modo concurrente.

Conclusión

useSyncExternalStore es un hook potente y eficiente para integrar fuentes de datos externas y bibliotecas de gestión de estado en tus componentes de React. Al comprender sus conceptos fundamentales, patrones de uso y mejores prácticas, puedes gestionar eficazmente el estado compartido en tus aplicaciones de React y optimizar el rendimiento. Ya sea que estés integrando bibliotecas de terceros, gestionando estado compartido entre componentes o recuperando datos de APIs externas, useSyncExternalStore proporciona una solución estandarizada y fiable. Adóptalo para construir aplicaciones de React más robustas, mantenibles y con mejor rendimiento para una audiencia global.

Recursos Adicionales

• Documentación de React sobre useSyncExternalStore
• Pull Request de React 18 que introduce useSyncExternalStore
• Biblioteca de Gestión de Estado Zustand
• Biblioteca de Gestión de Estado Jotai