React'te SSR Uyumlu Kalıcı State: useLocalStorage Hook'u
useState + useEffect ile yazılan localStorage çözümlerinin dört gizli hatasını ve bunları çözen useLocalStorage hook'unun SSR, senkronizasyon ve serileştirme yaklaşımını inceliyoruz.
Dashboard filtreleri gibi kullanıcı tercihlerini kalıcı hale getirmek için geliştiricilerin sıkça başvurduğu useState + useEffect + localStorage kalıbı, göründüğünden çok daha kırılgan. Sunucu tarafı render (SSR) sırasında çökme veya hydration uyumsuzluğu, bozuk JSON verisinde patlama, sekmeler arası senkronizasyon eksikliği ve aynı anahtarı kullanan bileşenlerin birbirinden habersiz kalması gibi dört ayrı hata bu basit görünen çözümde saklı.
@reactuses/core kütüphanesindeki useLocalStorage hook'u, useState ile birebir aynı arayüzü sunarken bu sorunların tamamını hook seviyesinde çözüyor. React'in useSyncExternalStore primitive'i üzerine inşa edilen hook, sunucuda varsayılan değeri döndürerek hem çökmeyi hem hydration uyarılarını engelliyor. Nesne, Map, Set ve Date gibi tipler için otomatik serileştirme yapıyor, setValue(null) çağrısıyla anahtarı localStorage'dan tamamen silmeyi destekliyor ve storage erişilemez olduğunda onError callback'i ile sessizce bellek içi state'e düşüyor.
Ayrıca native storage event'ini dinleyerek sekmeler arası senkronizasyonu varsayılan olarak sağlıyor; kendi yazdığı değişiklikleri de dahili olarak yeniden yayınlayarak aynı sekmedeki farklı bileşenlerin aynı anahtarda her zaman aynı değeri göstermesini garanti ediyor.
Bu tür hook'lar, kalıcı state yönetimini elle yazmak yerine test edilmiş, TypeScript-first bir API'ye devretmek isteyen React ekipleri için pratik bir referans noktası oluşturuyor; özellikle SSR destekli uygulamalarda hydration hatalarını önceden bertaraf etmesi dikkat çekici.