Dalam seri artikel ini, kami memulai perjalanan melalui bidang React hooks kustom, menemukan potensi besarnya untuk meningkatkan proyek pengembangan Anda. Fokus kami hari ini adalah pada hook "useStorage", salah satu dari banyak hook yang dibuat dengan cermat yang tersedia dalam koleksi hook kustom React.

Github:https://github.com/sergeyleschev/react-custom-hooks

import { useCallback, useState, useEffect } from "react"

export function useLocalStorage(key, defaultValue) {
    return useStorage(key, defaultValue, window.localStorage)
}
export function useSessionStorage(key, defaultValue) {
    return useStorage(key, defaultValue, window.sessionStorage)
}
function useStorage(key, defaultValue, storageObject) {
    const [value, setValue] = useState(() => {
        const jsonValue = storageObject.getItem(key)
        if (jsonValue != null) return JSON.parse(jsonValue)
        if (typeof defaultValue === "function") {
            return defaultValue()
        } else {
            return defaultValue
        }
    })
    useEffect(() => {
        if (value === undefined) return storageObject.removeItem(key)
        storageObject.setItem(key, JSON.stringify(value))
    }, [key, value, storageObject])
    const remove = useCallback(() => {
        setValue(undefined)
    }, [])
    return [value, setValue, remove]
}

Kait useStorage menyediakan dua fungsi praktis: useLocalStorage dan useSessionStorage. Dengan useLocalStorage, Anda dapat dengan mudah menyimpan dan mengambil data di penyimpanan lokal browser, sementara useSessionStorage menawarkan fungsionalitas yang sama tetapi dengan penyimpanan sesi.

Salah satu keunggulan utama pengait khusus ini adalah kesederhanaannya. Anda dapat menggunakannya untuk menyimpan semua jenis data, seperti string, angka, atau bahkan objek kompleks, hanya dengan beberapa baris kode. Selain itu, useStorage menangani serialisasi dan deserialisasi data untuk Anda, sehingga Anda tidak perlu khawatir tentang konversi nilai ke dan dari JSON.

Keuntungan lainnya adalah sinkronisasi otomatis antara data yang disimpan dan status komponen. Setiap kali data yang disimpan berubah, hook akan memperbarui status komponen. Demikian pula, ketika status komponen berubah, hook secara otomatis menyimpan nilai baru ke penyimpanan. Sinkronisasi dua arah ini memastikan aplikasi Anda selalu menampilkan data terbaru, sehingga ideal untuk skenario yang memerlukan pembaruan real-time.

Kait useStorage juga menyediakan fungsi hapus, sehingga Anda dapat dengan mudah menghapus nilai yang disimpan saat tidak diperlukan lagi. Fungsionalitas ini berguna saat menerapkan fitur seperti tombol logout atau menghapus data spesifik pengguna.

import { useSessionStorage, useLocalStorage } from "./useStorage"

export default function StorageComponent() {
    const [name, setName, removeName] = useSessionStorage("name", "Sergey")
    const [age, setAge, removeAge] = useLocalStorage("age", 26)
    return (     
{name} - {age}

setName("John")}>Set NamesetAge(40)}>Set AgeRemove NameRemove Age) }

Anda dapat menggunakan kait useStorage dalam berbagai skenario. Misalnya, bayangkan Anda memiliki panel pengaturan tempat pengguna dapat menyesuaikan preferensi mereka. Dengan menggunakan useLocalStorage, Anda dapat dengan mudah menyimpan dan mengambil pengaturan ini, memastikan bahwa pengaturan tersebut tetap ada selama halaman dimuat ulang atau bahkan jika pengguna menutup dan membuka kembali browser.