Пользовательский хук React: useStorage

В этой серии статей мы отправляемся в путешествие по сфере пользовательских хуков React, открывая их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке «useStorage», одном из многих тщательно созданных хуков, доступных в коллекции пользовательских хуков 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]
}

Перехватчик useStorage предоставляет две удобные функции: useLocalStorage и useSessionStorage. С помощью useLocalStorage вы можете легко хранить и извлекать данные в локальном хранилище браузера, а useSessionStorage предлагает ту же функциональность, но вместо этого использует хранилище сеансов.

Одним из ключевых преимуществ этого пользовательского крючка является его простота. Вы можете использовать его для хранения данных любого типа, таких как строки, числа или даже сложные объекты, с помощью всего лишь нескольких строк кода. Кроме того, useStorage выполняет за вас сериализацию и десериализацию данных, поэтому вам не придется беспокоиться о преобразовании значений в JSON и из него.

Еще одним преимуществом является автоматическая синхронизация сохраненных данных и состояния компонента. Всякий раз, когда сохраненные данные изменяются, хук соответствующим образом обновляет состояние компонента. Аналогично, когда состояние компонента изменяется, перехватчик автоматически сохраняет новое значение в хранилище. Такая двунаправленная синхронизация гарантирует, что ваше приложение всегда отражает самые последние данные, что делает его идеальным для сценариев, где обновления в реальном времени имеют решающее значение.

Хук useStorage также предоставляет функцию удаления, позволяющую легко удалять сохраненные значения, когда они больше не нужны. Эта функция пригодится при реализации таких функций, как кнопки выхода из системы или очистка пользовательских данных.

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

export default function StorageComponent() {
    const [name, setName, removeName] = useSessionStorage("name", "Sergey")
    const [age, setAge, removeAge] = useLocalStorage("age", 26)
    return (
        <div>
            <div>
                {name} - {age}
            </div>
            <button onClick={() => setName("John")}>Set Name</button>
            <button onClick={() => setAge(40)}>Set Age</button>
            <button onClick={removeName}>Remove Name</button>
            <button onClick={removeAge}>Remove Age</button>
        </div>
    )
}

Вы можете использовать хук useStorage в различных сценариях. Например, представьте, что у вас есть панель настроек, где пользователи могут настраивать свои предпочтения. Используя useLocalStorage, вы можете легко сохранять и извлекать эти настройки, гарантируя, что они сохранятся при перезагрузке страницы или даже если пользователь закроет и снова откроет браузер.

Полная версия | Пользовательские хуки React: https://medium.com/@sergeyleschev/supercharge-your-projects-with-custom-hooks-4d946b297d18