useLocalStorage
- React kursu
- Orta seviye
- Ders 5/80
- 4 dk
State'i tarayıcı localStorage'ına yazan bir hook yazmayı öğrenirsin.
useLocalStorage
useLocalStorage, bir state'i tarayıcının localStorage'ında saklar. Sayfa yenilense bile değer kaybolmaz. useState'in kalıcı versiyonudur.
İskelet: const [value, setValue] = useState(() => { const saved = localStorage.getItem(key); return saved ? JSON.parse(saved) : initial; });. Başlangıç değeri bir fonksiyon olarak verilir; böylece yalnızca ilk okumada localStorage'a erişilir.
Değişiklikleri kaydetmek için useEffect eklenir: useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [value, key]);. Böylece her değişimde otomatik kaydeder.
JSON dönüşümü
localStorage yalnızca dize (string) saklar. Bu yüzden nesne ya da dizi kaydetmek için JSON.stringify ile dizeye, okurken JSON.parse ile geri nesneye çeviririz.
Hata yönetimi önemli: bozuk bir dize JSON.parse'i patlatabilir. Bu yüzden okuma genellikle try/catch içine alınır. Aksi halde uygulama açılışta çökebilir.
Tür güvenliği için bir önlem: kaydedilen veriyi bir yapıya göre doğrulamak. Bu derste basit tutuyoruz ama üretimde bu adımı atlamamak gerekir.
Uygulama useLocalStorage iskeleti
Aşağıdaki iskeleti tamamla. useLocalStorage(key, initial) hook'u yaz. useState ile lazy başlangıç: () => { const saved = localStorage.getItem(key); return saved ? JSON.parse(saved) : initial; }. useEffect ile localStorage.setItem(key, JSON.stringify(value)); bağımlılık [key, value]. [value, setValue] döndür. Hook'u dışa aktar.
Başlangıç kodu
import { useState, useEffect } from "react";
// useLocalStorage hook'unu buraya yazÖrnek çözüm
import { useState, useEffect } from "react";
function useLocalStorage(key, initial) {
const [value, setValue] = useState(() => {
const saved = localStorage.getItem(key);
return saved ? JSON.parse(saved) : initial;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}
export default useLocalStorage;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Lazy başlangıç ne işe yarar?
- Her render'da okur
- İlk okumada localStorage'a erişir Doğru cevap
- useEffect'i atlar
- State'i siler
Açıklama: Lazy init yalnızca ilk okumada çalışır.
2 Kayıt yöntemi
Tarayıcıya kaydetmek için ____ çağrılır.Tarayıcıya kaydetmek için localStorage.setItem çağrılır.Açıklama: localStorage.setItem ile kaydedilir.
3 useLocalStorage adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
useState |
Lazy başlangıç |
localStorage.getItem |
Okuma |
JSON.parse |
Dizeden nesne |
useEffect |
Kayıt |