useSyncExternalStore nedir? Tearing problemi nedir?

useSyncExternalStore, React dışındaki bir veri kaynağına (global store, tarayıcı API'si, WebSocket cache'i) concurrent rendering ile güvenli şekilde abone olmak için kullanılan hook'tur. Zustand, Redux (useSelector) gibi kütüphaneler içeride bunu kullanır.

Tearing nedir?

Concurrent rendering'de React bir render'ı parçalara bölüp araya başka işler alabilir. Bu sırada dış store değişirse, aynı render'daki bazı bileşenler eski değeri, bazıları yeni değeri görür; ekranda tutarsız (yırtılmış) bir UI oluşur. useEffect + useState ile yapılan abonelik buna açıktır. useSyncExternalStore değişiklik tespit ederse render'ı senkron olarak yeniden yapar ve tutarlılığı garanti eder.

Kullanım

function subscribe(callback: () => void) {
  window.addEventListener("online", callback);
  window.addEventListener("offline", callback);
  return () => {
    window.removeEventListener("online", callback);
    window.removeEventListener("offline", callback);
  };
}

function useOnlineStatus() {
  return useSyncExternalStore(
    subscribe,                 // abone ol, unsubscribe döndür
    () => navigator.onLine,    // client snapshot
    () => true                 // server snapshot (SSR)
  );
}

Kendi küçük store'unuz

let state = { count: 0 };
const listeners = new Set<() => void>();
export const store = {
  get: () => state,
  set: (next: typeof state) => { state = next; listeners.forEach((l) => l()); },
  subscribe: (l: () => void) => { listeners.add(l); return () => listeners.delete(l); },
};
const count = useSyncExternalStore(store.subscribe, () => store.get().count);

Kurallar

• getSnapshot aynı veri için aynı referansı döndürmeli; her çağrıda yeni nesne dönerse sonsuz render döngüsü olur.
• subscribe fonksiyonunu bileşen dışında tanımlayın; her render'da yeni fonksiyon yeniden abonelik yaratır.