React
Explica cómo useSyncExternalStore integra fuentes externas mediante subscribe y getSnapshot, manteniendo snapshots consistentes con renderizado concurrente y SSR.
Un store externo cambia fuera del ciclo normal de estado React. useSyncExternalStore ofrece una suscripción compatible con renderizado concurrente y SSR.
function useOnlineStatus() {
return useSyncExternalStore(
subscribe,
getSnapshot,
getServerSnapshot,
);
}subscribe registra un callback y devuelve cleanup.getSnapshot devuelve el valor actual.getServerSnapshot ofrece un valor consistente para renderizado inicial del servidor.function subscribe(callback: () => void) {
window.addEventListener("online", callback);
window.addEventListener("offline", callback);
return () => {
window.removeEventListener("online", callback);
window.removeEventListener("offline", callback);
};
}
function getSnapshot() {
return navigator.onLine;
}Normalmente las bibliotecas de estado implementan esta integración internamente. No necesitas llamar el Hook directamente para usar Redux o Zustand.
getSnapshot.subscribe en cada render sin necesidad.useState.Es el puente oficial para datos mutables externos que deben participar correctamente en el modelo de renderizado React.
Patrón ingenuo:
function useStore(store: Store) {
const [state, setState] = useState(store.getState());
useEffect(() => store.subscribe(() => setState(store.getState())), [store]);
return state;
}Entre render y effect el store puede cambiar. Durante rendering concurrente, distintas partes podrían observar snapshots incompatibles. useSyncExternalStore permite que React verifique el snapshot antes del commit.
function subscribe(onStoreChange: () => void) {
listeners.add(onStoreChange);
return () => listeners.delete(onStoreChange);
}Debe:
Si defines subscribe dentro del componente, React puede resuscribirse en cada render. Decláralo fuera o memoízalo cuando realmente depende de props.
function getSnapshot() {
return store.getState();
}Mientras la store no cambie, debe devolver un valor igual según Object.is.
Incorrecto:
function getSnapshot() {
return { ...store.getState() };
}Crea un objeto nuevo en cada lectura y puede producir loops o renders continuos. La store debe cachear su snapshot o el selector debe conservar referencias.
let state = { count: 0 };
const listeners = new Set<() => void>();
const counterStore = {
getSnapshot() {
return state;
},
subscribe(listener: () => void) {
listeners.add(listener);
return () => listeners.delete(listener);
},
increment() {
state = { count: state.count + 1 };
listeners.forEach((listener) => listener());
},
};function Counter() {
const state = useSyncExternalStore(
counterStore.subscribe,
counterStore.getSnapshot,
counterStore.getSnapshot,
);
return <button onClick={counterStore.increment}>{state.count}</button>;
}La store produce snapshots inmutables y notifica después de reemplazarlos.
navigator.onLine, media queries o storage pueden adaptarse:
function subscribe(callback: () => void) {
window.addEventListener("online", callback);
window.addEventListener("offline", callback);
return () => {
window.removeEventListener("online", callback);
window.removeEventListener("offline", callback);
};
}
function getSnapshot() {
return navigator.onLine;
}
function getServerSnapshot() {
return true;
}El snapshot servidor debe producir un primer render cliente compatible. Si no conoces el valor real, elige un default y actualiza después de hydration.
La API base devuelve el snapshot completo. Librerías implementan selectores y equality para que un componente lea una parte:
const count = useStore((state) => state.count);Un selector que devuelve un objeto nuevo necesita memoización o comparación:
(state) => ({ count: state.count })De lo contrario, cada snapshot parece diferente.
Una store puede mutar internamente por rendimiento, pero getSnapshot debe exponer una referencia nueva cuando el valor observable cambia y conservarla cuando no cambia. Para consumidores, el snapshot se trata como inmutable.
getServerSnapshot se ejecuta durante server rendering y hydration inicial. El valor debe serializarse o reconstruirse de forma consistente. Una store singleton servidor puede filtrar datos entre requests; crea una instancia por request cuando contiene información de usuario.
Si el servidor devuelve true para online y el cliente inicialmente devuelve false, React utiliza el snapshot servidor durante hydration y después actualiza. Diseña UI para evitar un mensaje engañoso crítico. Algunas fuentes pueden omitir server rendering o mostrar estado desconocido.
Si una store externa cambia durante una transition, React puede volver a leer el snapshot para asegurar consistencia. Si el valor cambió de forma incompatible, la actualización puede convertirse en bloqueante. La store debe ofrecer snapshots estables y rápidos.
Redux, Zustand y otras suelen integrar esta primitive internamente. El desarrollador de producto usa sus Hooks. useSyncExternalStore es especialmente relevante para:
No reimplementes una librería madura sin necesidad.
Usa la herramienta correspondiente; no muevas state fuera de React solo para probar la API.
Prueba:
Warnings o loops suelen indicar:
getSnapshot crea un valor nuevo siempre.subscribe cambia en cada render.useSyncExternalStore conecta snapshots externos con garantías de React.subscribe notifica y limpia; getSnapshot debe cachear referencias.getServerSnapshot mantiene SSR/hydration consistente.getSnapshot es incorrecto?subscribe?SSR, hidratación y streaming profundiza en el contrato que getServerSnapshot debe respetar.