Menyinkronkan Status dengan localStorage

Insting awal biasanya adalah membaca localStorage di satu tempat dan menulisnya di tempat lain, tetapi keduanya dapat menjadi tidak selaras. Pembaruan status yang lupa disimpan, atau nilai tersimpan yang tidak tercermin dalam status, dapat menimbulkan galat.

Anda memerlukan satu sumber kebenaran yang menjaga status React dan penyimpanan tetap selaras.

Solusi yang rapi adalah pengait useLocalStorage yang membungkus useState dan menyimpan perubahan secara otomatis. Pengait ini mengembalikan nilai dan fungsi pengatur seperti useState.

Kode pemakai menggunakannya persis seperti status biasa, tetapi mendapatkan penyimpanan otomatis.

Membaca localStorage adalah pekerjaan sinkron, jadi Anda tidak boleh melakukannya pada setiap perenderan. Berikan fungsi kepada useState sebagai inisialisasi tertunda agar pembacaan hanya terjadi sekali saat komponen dipasang.

Di dalam fungsi tersebut, uraikan nilai yang tersimpan atau kembalikan nilai bawaan yang diberikan.

Jika Anda menghitung status awal langsung sebagai argumen, ekspresi tersebut dijalankan pada setiap perenderan meskipun diabaikan setelah perenderan pertama. Dengan fungsi, React hanya memanggilnya sekali.

Untuk pembacaan localStorage, cara ini menghindari pekerjaan sinkron berulang pada utas utama di setiap perenderan.

Untuk menyimpan pembaruan, tambahkan useEffect yang berjalan setiap kali nilai berubah dan memanggil localStorage.setItem(key, JSON.stringify(value)).

Dengan menempatkan nilai tersebut dalam larik dependensi, setiap perubahan status akan otomatis ditulis ke penyimpanan.

Saat menetapkan nilai berdasarkan nilai sebelumnya, gunakan bentuk fungsional setValue(prev => prev + 1). Cara ini menghindari penggunaan nilai lama yang tertangkap dan kemudian ditulis.

Hal ini sangat penting di dalam penangan peristiwa dan efek yang mungkin menangkap cuplikan data yang sudah tidak berlaku.

getItem mengembalikan null ketika kunci tidak ada. Fungsi inisialisasi Anda harus mendeteksi keadaan ini dan menggunakan nilai bawaan, bukan mencoba mengurai nilai null.

Pemeriksaan seperti stored != null ? JSON.parse(stored) : defaultValue menangani kunjungan pertama dengan baik.

Dalam TypeScript, Anda membuat pengait generik: function useLocalStorage<T>(key: string, initial: T). Cara ini mempertahankan tipe nilai sehingga kode pemakai mendapatkan keamanan tipe sepenuhnya.

Tupel yang dikembalikan bertipe [T, Dispatch<SetStateAction<T>>], sama seperti useState.

Seiring waktu, struktur data Anda berubah dan nilai lama yang tersimpan dapat merusak kode baru. Simpan kunci versi bersama data agar Anda dapat mendeteksi format yang sudah usang.

Contohnya, simpan { version: 2, data } lalu bandingkan versinya saat membaca.

Jika versi yang tersimpan tidak cocok dengan versi saat ini, buang atau migrasikan nilai lama, bukan mempercayainya begitu saja. Strategi paling sederhana adalah menghapus entri usang dan kembali ke nilai bawaan.

Ini mencegah kerusakan yang disebabkan oleh data yang ditulis oleh rilis aplikasi yang lebih lama.

useLocalStorage lengkap menggabungkan fungsi inisialisasi tertunda yang membaca dan mengurai data dengan aman, fungsi pengatur yang mendukung pembaruan berbasis fungsi, serta useEffect yang menulis langsung ke penyimpanan dengan penomoran versi.

Hasilnya adalah pengganti siap pakai untuk useState yang tetap bertahan setelah pemuatan ulang.

Uji pemahaman Anda tentang inisialisasi status.

Anda telah mempelajari cara membuat pengait useLocalStorage dengan fungsi inisialisasi tertunda, menyimpan perubahan melalui useEffect, menggunakan pembaruan berbasis fungsi untuk menghindari nilai lama yang tertangkap, dan menangani nilai kosong.

Anda juga telah mempelajari generik TypeScript dan penomoran versi untuk menghapus data usang dengan aman.