React useSyncExternalStore: Dominando la Sincronización de Estado Externo

useSyncExternalStore es un hook de React introducido en React 18 que te permite suscribirte y leer de fuentes de datos externas de una manera compatible con el renderizado concurrente. Este hook cierra la brecha entre el estado gestionado por React y el estado externo, como datos de bibliotecas de terceros, APIs del navegador u otros frameworks de UI. Profundicemos en la comprensión de su propósito, implementación y beneficios.

Comprendiendo la Necesidad de useSyncExternalStore

La gestión de estado integrada de React (useState, useReducer, Context API) funciona excepcionalmente bien para datos estrechamente acoplados al árbol de componentes de React. Sin embargo, muchas aplicaciones necesitan integrarse con fuentes de datos *fuera* del control de React. Estas fuentes externas pueden incluir:

• Bibliotecas de gestión de estado de terceros: Integración con bibliotecas como Zustand, Jotai o Valtio.
• APIs del navegador: Acceso a datos de localStorage, IndexedDB o la API Network Information.
• Datos obtenidos de servidores: Aunque bibliotecas como React Query y SWR a menudo son preferidas, a veces puedes querer control directo.
• Otros frameworks de UI: En aplicaciones híbridas donde React coexiste con otras tecnologías de UI.

Leer y escribir directamente en estas fuentes externas dentro de un componente React puede generar problemas, particularmente con el renderizado concurrente. React podría renderizar un componente con datos obsoletos si la fuente externa cambia mientras React está preparando una nueva pantalla. useSyncExternalStore resuelve este problema proporcionando un mecanismo para que React se sincronice de forma segura con el estado externo.

Cómo Funciona useSyncExternalStore

El hook useSyncExternalStore acepta tres argumentos:

1. subscribe: Una función que acepta una función de callback. Esta callback será invocada cada vez que el store externo cambie. La función debe devolver otra función que, al ser llamada, desuscriba del store externo.
2. getSnapshot: Una función que devuelve el valor actual del store externo. React utiliza esta función para leer el valor del store durante el renderizado.
3. getServerSnapshot (opcional): Una función que devuelve el valor inicial del store externo en el servidor. Esto solo es necesario para la renderización del lado del servidor (SSR). Si no se proporciona, React usará getSnapshot en el servidor.

El hook devuelve el valor actual del store externo, obtenido de la función getSnapshot. React asegura que el componente se re-renderice cada vez que el valor devuelto por getSnapshot cambie, determinado por la comparación Object.is.

Ejemplo Básico: Sincronizando con localStorage

Creemos un ejemplo simple que utiliza useSyncExternalStore para sincronizar un valor con localStorage.

            import { useSyncExternalStore, useState, useEffect } from 'react';

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

function getSnapshot() {
  return localStorage.getItem('myValue') || 'default';
}

function getServerSnapshot() {
  return 'default'; // O recuperar de una cookie en el servidor
}

function MyComponent() {
  const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
  const [localValue, setLocalValue] = useState(value);

  useEffect(() => {
    setLocalValue(value);
  }, [value]);

  const setValue = (newValue) => {
    localStorage.setItem('myValue', newValue);
  };

  const handleInputChange = (event) => {
    setValue(event.target.value);
  };

  return (
    

      
Valor de localStorage: {localValue}
      
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

En este ejemplo:

• subscribe: Escucha el evento storage en el objeto window. Este evento se dispara cada vez que localStorage es modificado por otra pestaña o ventana.
• getSnapshot: Recupera el valor de myValue de localStorage.
• getServerSnapshot: Devuelve un valor por defecto para la renderización del lado del servidor. Esto podría recuperarse de una cookie si el usuario hubiera establecido previamente un valor.
• MyComponent: Utiliza useSyncExternalStore para suscribirse a los cambios en localStorage y mostrar el valor actual.

Casos de Uso Avanzados y Consideraciones

1. Integración con Bibliotecas de Gestión de Estado de Terceros

useSyncExternalStore brilla al integrar componentes de React con bibliotecas de gestión de estado externas. Veamos un ejemplo usando Zustand:

            import { useSyncExternalStore } from 'react';
import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

function MyComponent() {
  const count = useSyncExternalStore(
    useStore.subscribe,
    useStore.getState,
    useStore.getState // Estado inicial en el servidor
  ).count;

  const increment = useStore((state) => state.increment);
  const decrement = useStore((state) => state.decrement);

  return (
    

      
Contador: {count}
      Incrementar
      Decrementar
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

En este ejemplo, useSyncExternalStore se utiliza para suscribirse a los cambios en el store de Zustand. Observe cómo pasamos useStore.subscribe y useStore.getState directamente al hook, haciendo la integración perfecta.

2. Optimización del Rendimiento con Memoización

Dado que getSnapshot se llama en cada renderizado, es crucial asegurarse de que sea eficiente. Evite cálculos costosos dentro de getSnapshot. Si es necesario, memoice el resultado de getSnapshot utilizando useMemo o técnicas similares.

Considere este ejemplo (potencialmente problemático):

            import { useSyncExternalStore, useMemo } from 'react';

const externalStore = {
  data: [...Array(10000).keys()], // Array grande
  listeners: [],
  subscribe(listener) {
    this.listeners.push(listener);
    return () => {
      this.listeners = this.listeners.filter((l) => l !== listener);
    };
  },
  setState(newData) {
    this.data = newData;
    this.listeners.forEach((listener) => listener());
  },
  getState() {
    return this.data;
  },
};

function ExpensiveComponent() {
  const data = useSyncExternalStore(
    externalStore.subscribe,
    () => externalStore.getState().map(x => x * 2) // Operación costosa
  );

  return (
    

      {data.slice(0, 10).map((item) => (
        
{item}
      ))}
    
  );
}

            

              
                Copy
              
            
          

En este ejemplo, getSnapshot (la función en línea pasada como segundo argumento a useSyncExternalStore) realiza una operación map costosa en un array grande. Esta operación se ejecutará en *cada* renderizado, incluso si los datos subyacentes no han cambiado. Para optimizar esto, podemos memoizar el resultado:

            import { useSyncExternalStore, useMemo } from 'react';

const externalStore = {
  // ... (igual que antes)
};

function OptimizedComponent() {
  const data = useSyncExternalStore(
    externalStore.subscribe,
    () => {
      return useMemo(() => externalStore.getState().map(x => x * 2), [externalStore.getState()]);
    }
  );

  return (
    

      {data.slice(0, 10).map((item) => (
        
{item}
      ))}
    
  );
}

            

              
                Copy
              
            
          

Ahora, la operación map solo se realiza cuando externalStore.getState() cambia. Nota: en realidad necesitarás comparar profundamente `externalStore.getState()` o usar una estrategia diferente si el store muta el mismo objeto. El ejemplo está simplificado para demostración.

3. Manejo del Renderizado Concurrente

El principal beneficio de useSyncExternalStore es su compatibilidad con las características de renderizado concurrente de React. El renderizado concurrente permite a React preparar múltiples versiones de la UI simultáneamente. Cuando el store externo cambia durante un renderizado concurrente, useSyncExternalStore asegura que React siempre utilice los datos más actualizados al confirmar los cambios en el DOM.

Sin useSyncExternalStore, los componentes podrían renderizarse con datos obsoletos, lo que generaría inconsistencias visuales y comportamientos inesperados. El método getSnapshot de useSyncExternalStore está diseñado para ser síncrono y rápido, permitiendo a React determinar rápidamente si el store externo ha cambiado durante el renderizado.

4. Consideraciones de Renderizado del Lado del Servidor (SSR)

Al usar useSyncExternalStore con renderizado del lado del servidor, es esencial proporcionar la función getServerSnapshot. Esta función se utiliza para recuperar el valor inicial del store externo en el servidor. Sin ella, React intentará usar getSnapshot en el servidor, lo que podría no ser posible si el store externo depende de APIs específicas del navegador (por ejemplo, localStorage).

La función getServerSnapshot debe devolver un valor por defecto o recuperar los datos de una fuente del lado del servidor (por ejemplo, cookies, base de datos). Esto asegura que el HTML inicial renderizado en el servidor contenga los datos correctos.

5. Manejo de Errores

Un manejo robusto de errores es crucial, especialmente cuando se trabaja con fuentes de datos externas. Envuelve las funciones getSnapshot y getServerSnapshot en bloques try...catch para manejar posibles errores. Registra los errores apropiadamente y proporciona valores de respaldo para evitar que la aplicación se bloquee.

6. Hooks Personalizados para Reutilización

Para promover la reutilización de código, encapsula la lógica de useSyncExternalStore dentro de un hook personalizado. Esto facilita compartir la lógica en múltiples componentes.

Por ejemplo, creemos un hook personalizado para acceder a una clave específica en localStorage:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, defaultValue) {
  function subscribe(callback) {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  }

  function getSnapshot() {
    return localStorage.getItem(key) || defaultValue;
  }

  function getServerSnapshot() {
    return defaultValue;
  }

  const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);

  const setValue = (newValue) => {
    localStorage.setItem(key, newValue);
  };

  return [value, setValue];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

Ahora, puedes usar fácilmente este hook en cualquier componente:

            import useLocalStorage from './useLocalStorage';

function MyComponent() {
  const [name, setName] = useLocalStorage('userName', 'Guest');

  return (
    

      
Hola, {name}!
       setName(e.target.value)} />
    
  );
}

            

              
                Copy
              
            
          

Mejores Prácticas

• Mantén getSnapshot Rápido: Evita cálculos costosos dentro de la función getSnapshot. Memoiza el resultado si es necesario.
• Proporciona getServerSnapshot para SSR: Asegúrate de que el HTML inicial renderizado en el servidor contenga los datos correctos.
• Usa Hooks Personalizados: Encapsula la lógica de useSyncExternalStore dentro de hooks personalizados para una mejor reutilización y mantenibilidad.
• Maneja Errores con Gracia: Envuelve getSnapshot y getServerSnapshot en bloques try...catch.
• Minimiza las Suscripciones: Suscríbete solo a las partes del store externo que el componente realmente necesita. Esto reduce re-renderizados innecesarios.
• Considera Alternativas: Evalúa si useSyncExternalStore es realmente necesario. Para casos simples, otras técnicas de gestión de estado podrían ser más apropiadas.

Alternativas a useSyncExternalStore

Si bien useSyncExternalStore es una herramienta poderosa, no siempre es la mejor solución. Considera estas alternativas:

• Gestión de Estado Integrada (useState, useReducer, Context API): Si los datos están estrechamente acoplados al árbol de componentes de React, estas opciones integradas son a menudo suficientes.
• React Query/SWR: Para la obtención de datos, estas bibliotecas ofrecen excelentes capacidades de caché, invalidación y manejo de errores.
• Zustand/Jotai/Valtio: Estas bibliotecas minimalistas de gestión de estado ofrecen una forma simple y eficiente de gestionar el estado de la aplicación.
• Redux/MobX: Para aplicaciones complejas con estado global, Redux o MobX podrían ser una mejor opción (aunque introducen más código repetitivo).

La elección depende de los requisitos específicos de tu aplicación.

Conclusión

useSyncExternalStore es una valiosa adición al conjunto de herramientas de React, lo que permite una integración perfecta con fuentes de estado externas al tiempo que mantiene la compatibilidad con el renderizado concurrente. Al comprender su propósito, implementación y casos de uso avanzados, puedes aprovechar este hook para construir aplicaciones React robustas y de alto rendimiento que interactúen eficazmente con datos de diversas fuentes.

Recuerda priorizar el rendimiento, manejar los errores con gracia y considerar soluciones alternativas antes de recurrir a useSyncExternalStore. Con una planificación e implementación cuidadosas, este hook puede mejorar significativamente la flexibilidad y el poder de tus aplicaciones React.

Exploración Adicional

• Documentación de React para useSyncExternalStore
• Ejemplos con varias bibliotecas de gestión de estado (Zustand, Jotai, Valtio)
• Benchmarks de rendimiento comparando useSyncExternalStore con otros enfoques