React useSyncExternalStore: Harici Durum Senkronizasyonunda Uzmanlaşma

useSyncExternalStore, React 18'de sunulan ve eşzamanlı render (concurrent rendering) ile uyumlu bir şekilde harici veri kaynaklarına abone olmanızı ve bu kaynaklardan veri okumanızı sağlayan bir React hook'udur. Bu hook, React'in yönetilen durumu ile üçüncü taraf kütüphanelerden, tarayıcı API'lerinden veya diğer UI framework'lerinden gelen veriler gibi harici durumlar arasındaki boşluğu doldurur. Gelin, amacını, uygulamasını ve faydalarını derinlemesine inceleyelim.

useSyncExternalStore İhtiyacını Anlamak

React'in yerleşik durum yönetimi (useState, useReducer, Context API), React bileşen ağacıyla sıkı sıkıya bağlı veriler için son derece iyi çalışır. Ancak, birçok uygulamanın React'in kontrolü *dışındaki* veri kaynaklarıyla entegre olması gerekir. Bu harici kaynaklar şunları içerebilir:

• Üçüncü taraf durum yönetimi kütüphaneleri: Zustand, Jotai veya Valtio gibi kütüphanelerle entegrasyon.
• Tarayıcı API'leri: localStorage, IndexedDB veya Ağ Bilgisi API'sinden (Network Information API) verilere erişim.
• Sunuculardan çekilen veriler: React Query ve SWR gibi kütüphaneler genellikle tercih edilse de, bazen doğrudan kontrol isteyebilirsiniz.
• Diğer UI framework'leri: React'in diğer UI teknolojileriyle bir arada bulunduğu hibrit uygulamalarda.

Bu harici kaynaklardan doğrudan okuma ve yazma yapmak, bir React bileşeni içinde, özellikle eşzamanlı render ile sorunlara yol açabilir. React yeni bir ekran hazırlarken harici kaynak değişirse, React bileşeni eski verilerle render edebilir. useSyncExternalStore, React'in harici durumla güvenli bir şekilde senkronize olması için bir mekanizma sağlayarak bu sorunu çözer.

useSyncExternalStore Nasıl Çalışır?

useSyncExternalStore hook'u üç argüman kabul eder:

1. subscribe: Bir geri arama (callback) fonksiyonu kabul eden bir fonksiyondur. Bu geri arama, harici store her değiştiğinde çağrılır. Fonksiyon, çağrıldığında harici store'dan aboneliği kaldıran bir fonksiyon döndürmelidir.
2. getSnapshot: Harici store'un mevcut değerini döndüren bir fonksiyondur. React, render sırasında store'un değerini okumak için bu fonksiyonu kullanır.
3. getServerSnapshot (isteğe bağlı): Sunucudaki harici store'un başlangıç değerini döndüren bir fonksiyondur. Bu, yalnızca sunucu tarafı render (SSR) için gereklidir. Sağlanmazsa, React sunucuda getSnapshot'ı kullanır.

Hook, getSnapshot fonksiyonundan elde edilen harici store'un mevcut değerini döndürür. React, getSnapshot tarafından döndürülen değer Object.is karşılaştırmasıyla belirlendiği şekilde değiştiğinde bileşenin yeniden render edilmesini sağlar.

Temel Örnek: localStorage ile Senkronizasyon

useSyncExternalStore kullanarak bir değeri localStorage ile senkronize eden basit bir örnek oluşturalım.

```javascript 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'; // Veya sunucudaki bir çerezden alınabilir } 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 ( ); } export default MyComponent; ```

Bu örnekte:

• subscribe: window nesnesindeki storage olayını dinler. Bu olay, localStorage başka bir sekme veya pencere tarafından değiştirildiğinde tetiklenir.
• getSnapshot: localStorage'dan myValue değerini alır.
• getServerSnapshot: Sunucu tarafı render için varsayılan bir değer döndürür. Bu, kullanıcı daha önce bir değer ayarlamışsa bir çerezden alınabilir.
• MyComponent: localStorage'daki değişikliklere abone olmak ve mevcut değeri görüntülemek için useSyncExternalStore kullanır.

Gelişmiş Kullanım Durumları ve Dikkat Edilmesi Gerekenler

1. Üçüncü Taraf Durum Yönetimi Kütüphaneleri ile Entegrasyon

useSyncExternalStore, React bileşenlerini harici durum yönetimi kütüphaneleriyle entegre ederken parlar. Zustand kullanarak bir örneğe bakalım:

```javascript 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 // Sunucudaki başlangıç durumu ).count; const increment = useStore((state) => state.increment); const decrement = useStore((state) => state.decrement); return ( ); } export default MyComponent; ```

Bu örnekte, useSyncExternalStore Zustand store'daki değişikliklere abone olmak için kullanılır. useStore.subscribe ve useStore.getState'i doğrudan hook'a nasıl aktardığımıza dikkat edin, bu da entegrasyonu sorunsuz hale getirir.

2. Memoization ile Performansı Optimize Etme

getSnapshot her render'da çağrıldığı için, performanslı olmasını sağlamak çok önemlidir. getSnapshot içinde pahalı hesaplamalardan kaçının. Gerekirse, getSnapshot'ın sonucunu useMemo veya benzer teknikler kullanarak memoize edin.

Bu (potansiyel olarak sorunlu) örneği düşünün:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { data: [...Array(10000).keys()], // Büyük dizi 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) // Pahalı işlem ); return (

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

); } ```

Bu örnekte, getSnapshot (useSyncExternalStore'a ikinci argüman olarak geçirilen satır içi fonksiyon) büyük bir dizi üzerinde pahalı bir map işlemi gerçekleştirir. Bu işlem, altta yatan veri değişmemiş olsa bile *her* render'da yürütülür. Bunu optimize etmek için sonucu memoize edebiliriz:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { // ... (öncekiyle aynı) }; 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}
))}

); } ```

Şimdi, map işlemi yalnızca externalStore.getState() değiştiğinde gerçekleştirilir. Not: Eğer store aynı nesneyi mutasyona uğratıyorsa, aslında `externalStore.getState()`'i derinlemesine karşılaştırmanız veya farklı bir strateji kullanmanız gerekecektir. Örnek, gösterim amacıyla basitleştirilmiştir.

3. Eşzamanlı Render'ı (Concurrent Rendering) Ele Alma

useSyncExternalStore'un temel faydası, React'in eşzamanlı render özellikleriyle uyumluluğudur. Eşzamanlı render, React'in UI'ın birden çok sürümünü aynı anda hazırlamasına olanak tanır. Eşzamanlı bir render sırasında harici store değiştiğinde, useSyncExternalStore, React'in değişiklikleri DOM'a yansıtırken her zaman en güncel veriyi kullanmasını sağlar.

useSyncExternalStore olmadan, bileşenler eski verilerle render edilebilir, bu da görsel tutarsızlıklara ve beklenmedik davranışlara yol açar. useSyncExternalStore'un getSnapshot yöntemi, senkron ve hızlı olacak şekilde tasarlanmıştır, bu da React'in render sırasında harici store'un değişip değişmediğini hızlıca belirlemesine olanak tanır.

4. Sunucu Tarafı Render (SSR) ile İlgili Hususlar

useSyncExternalStore'u sunucu tarafı render ile kullanırken, getServerSnapshot fonksiyonunu sağlamak çok önemlidir. Bu fonksiyon, sunucudaki harici store'un başlangıç değerini almak için kullanılır. Bu olmadan, React sunucuda getSnapshot'ı kullanmaya çalışır, bu da harici store tarayıcıya özgü API'lere (örneğin, localStorage) dayanıyorsa mümkün olmayabilir.

getServerSnapshot fonksiyonu varsayılan bir değer döndürmeli veya veriyi sunucu tarafı bir kaynaktan (örneğin, çerezler, veritabanı) almalıdır. Bu, sunucuda render edilen başlangıç HTML'inin doğru verileri içermesini sağlar.

5. Hata Yönetimi

Sağlam bir hata yönetimi, özellikle harici veri kaynaklarıyla uğraşırken çok önemlidir. Potansiyel hataları yönetmek için getSnapshot ve getServerSnapshot fonksiyonlarını try...catch bloklarına alın. Hataları uygun şekilde kaydedin ve uygulamanın çökmesini önlemek için yedek değerler sağlayın.

6. Yeniden Kullanılabilirlik için Özel Hook'lar

Kodun yeniden kullanılabilirliğini artırmak için, useSyncExternalStore mantığını özel bir hook içinde kapsülleyin. Bu, mantığı birden fazla bileşen arasında paylaşmayı kolaylaştırır.

Örneğin, localStorage'daki belirli bir anahtara erişmek için özel bir hook oluşturalım:

```javascript 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; ```

Şimdi, bu hook'u herhangi bir bileşende kolayca kullanabilirsiniz:

```javascript import useLocalStorage from './useLocalStorage'; function MyComponent() { const [name, setName] = useLocalStorage('userName', 'Guest'); return ( ); } ```

En İyi Uygulamalar

• getSnapshot'ı Hızlı Tutun: getSnapshot fonksiyonu içinde pahalı hesaplamalardan kaçının. Gerekirse sonucu memoize edin.
• SSR için getServerSnapshot Sağlayın: Sunucuda render edilen başlangıç HTML'inin doğru verileri içerdiğinden emin olun.
• Özel Hook'lar Kullanın: Daha iyi yeniden kullanılabilirlik ve sürdürülebilirlik için useSyncExternalStore mantığını özel hook'lar içinde kapsülleyin.
• Hataları Zarifçe Yönetin: getSnapshot ve getServerSnapshot'ı try...catch bloklarına alın.
• Abonelikleri En Aza İndirgen: Yalnızca bileşenin gerçekten ihtiyaç duyduğu harici store bölümlerine abone olun. Bu, gereksiz yeniden render'ları azaltır.
• Alternatifleri Göz Önünde Bulundurun: useSyncExternalStore'un gerçekten gerekli olup olmadığını değerlendirin. Basit durumlar için diğer durum yönetimi teknikleri daha uygun olabilir.

useSyncExternalStore Alternatifleri

useSyncExternalStore güçlü bir araç olsa da, her zaman en iyi çözüm değildir. Bu alternatifleri göz önünde bulundurun:

• Yerleşik Durum Yönetimi (useState, useReducer, Context API): Veri, React bileşen ağacıyla sıkı bir şekilde bağlantılıysa, bu yerleşik seçenekler genellikle yeterlidir.
• React Query/SWR: Veri çekme işlemleri için bu kütüphaneler mükemmel önbellekleme, geçersiz kılma ve hata yönetimi yetenekleri sunar.
• Zustand/Jotai/Valtio: Bu minimalist durum yönetimi kütüphaneleri, uygulama durumunu yönetmek için basit ve verimli bir yol sunar.
• Redux/MobX: Küresel duruma sahip karmaşık uygulamalar için Redux veya MobX daha iyi bir seçim olabilir (ancak daha fazla standart kod gerektirirler).

Seçim, uygulamanızın özel gereksinimlerine bağlıdır.

Sonuç

useSyncExternalStore, React'in araç setine değerli bir ektir ve eşzamanlı render ile uyumluluğu korurken harici durum kaynaklarıyla sorunsuz entegrasyon sağlar. Amacını, uygulamasını ve gelişmiş kullanım durumlarını anlayarak, bu hook'u çeşitli kaynaklardan gelen verilerle etkili bir şekilde etkileşime giren sağlam ve performanslı React uygulamaları oluşturmak için kullanabilirsiniz.

useSyncExternalStore'a başvurmadan önce performansa öncelik vermeyi, hataları zarifçe yönetmeyi ve alternatif çözümleri göz önünde bulundurmayı unutmayın. Dikkatli planlama ve uygulama ile bu hook, React uygulamalarınızın esnekliğini ve gücünü önemli ölçüde artırabilir.

Daha Fazla Araştırma

• useSyncExternalStore için React Dokümantasyonu
• Çeşitli durum yönetimi kütüphaneleriyle (Zustand, Jotai, Valtio) örnekler
• useSyncExternalStore'u diğer yaklaşımlarla karşılaştıran performans karşılaştırmaları