Hooks

useSyncExternalStore

Hook para integrar stores externos (Redux, Zustand) com Concurrent React sem tearing.

Definição

useSyncExternalStore é o hook oficial para subscribar em stores externos (não-React) garantindo consistência em Concurrent Mode. Substitui useEffect+useState para subscriptions. Usado internamente pelo Redux, Zustand e outras libs modernas.

Problema → Solução

Problema

Em Concurrent Mode, renders podem ser interrompidos. Stores externos (subscribe-based) podem causar tearing — UI mostrando estados diferentes em momentos diferentes do render.

Solução

useSyncExternalStore garante leitura síncrona e consistente do store, sem tearing. API: useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot).

Dica de entrevista

Tip

Você raramente vai usar diretamente — Zustand, Redux Toolkit, etc já usam internamente. Use quando criar lib de state management ou subscribar APIs nativas (matchMedia, online/offline).

Código

function useMediaQuery(query) {
  return useSyncExternalStore(
    (callback) => {
      const mql = window.matchMedia(query);
      mql.addEventListener('change', callback);
      return () => mql.removeEventListener('change', callback);
    },
    () => window.matchMedia(query).matches,
    () => false // SSR fallback
  );
}

const isMobile = useMediaQuery('(max-width: 768px)');

Perguntas de entrevista

Q.Quando usar useSyncExternalStore vs useEffect?▾

A.useSyncExternalStore: quando o valor vem de fora do React (window.matchMedia, BroadcastChannel, custom store). useEffect+useState: para values que estão no React e mudam por setState.

Q.Como integrar com window.matchMedia?▾

A.Subscribe = adiciona listener; getSnapshot = retorna mql.matches atual; getServerSnapshot = false (server não tem viewport). Hook retorna boolean reativo.

Q.Selector com useSyncExternalStore?▾

A.Use a versão useSyncExternalStoreWithSelector (do react-server-utils ou Redux). Permite memoizar partes do store, evitando re-renders desnecessários.

Termos relacionados

30/122← →