React Custom Hook: useStorage

In this article series, we embark on a journey through the realm of custom React hooks, discovering their immense potential for elevating your development projects. Our focus today is on the "useStorage" hook, one of the many carefully crafted hooks available in the collection of React custom hooks.

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]
}

The useStorage hook provides two convenient functions: useLocalStorage and useSessionStorage. With useLocalStorage, you can effortlessly store and retrieve data in the browser's local storage, while useSessionStorage offers the same functionality but with the session storage instead.

One of the key advantages of this custom hook is its simplicity. You can use it to store any type of data, such as strings, numbers, or even complex objects, with just a few lines of code. Additionally, useStorage handles the serialization and deserialization of data for you, so you don't have to worry about converting values to and from JSON.

Another advantage is the automatic synchronization between the stored data and the component's state. Whenever the stored data changes, the hook updates the component's state accordingly. Similarly, when the component's state changes, the hook automatically persists the new value to the storage. This bidirectional synchronization ensures that your application always reflects the latest data, making it ideal for scenarios where real-time updates are crucial.

The useStorage hook also provides a remove function, allowing you to easily delete stored values when they are no longer needed. This functionality comes in handy when implementing features like logout buttons or clearing user-specific data.

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>
    )
}

You can use the useStorage hook in a variety of scenarios. For example, imagine you have a settings panel where users can customize their preferences. By using useLocalStorage, you can easily store and retrieve these settings, ensuring that they persist across page reloads or even if the user closes and reopens the browser.

#webdevelopment #webdev #javascript #typescript #frontend #react #reactjs #reactnative

Начать дискуссию

Я хотел сделать вкуснее всех, но оказалось, что это нерентабельно

Сначала мы открыли, а потом закрыли свой фастфуд, потом открыли доставку и сейчас её закрываем. Теперь я почти свободен и могу порассуждать о том, как владелец доставки может зарабатывать меньше курьера.

7676

1010

Ну как только люди начали выдавать справедливые замечания к цене и косякам, Обломов не выдержал и закрылся. Сам всех обсуждал, а собственной критики не выдержал.

разместить

Таня Боброва

Маркетплейсы

1ч

Wildberries запустил самовывоз товаров из торговых точек партнёров в 16 городах России

Покупатели смогут оформить заказ на маркетплейсе, а забрать непосредственно у продавца.

Novofon

3ч

Как ИИ помогает выявлять проблемы в работе call-центра?

Раньше для анализа работы call-центра приходилось переслушивать записи звонков вручную, проводить опросы, внедрять сложные метрики. Это занимало время и не всегда приводило к точным выводам.

Южнокорейский разработчик чипов FuriosaAI отклонил предложение Meta* о покупке бизнеса за $800 млн — Bloomberg

И решил развивать его самостоятельно.

Ася Карпова

2ч

Alibaba представила нейросеть, которая копирует движения людей на исходных видео и анимирует персонажей

Её можно протестировать в бесплатной демоверсии.

Заговор маркетплейсов: как Ozon и Wildberries избегают прямой конкуренции и покоряют Россию

Сложно представить жизнь современного человека без маркетплейсов. Ozon и Wildberries стали частью повседневности, но их противостояние — это не битва за одних и тех же клиентов. Это история о том, как два гиганта нашли уникальные пути к успеху, разделив аудиторию и создав собственные правила игры. Как предприниматель с многолетним опытом, я проведу…

1010

Законопроект, который может спасти от уголовного дела за пост в соцсетях

Сейчас всё работает так: если ты запостил или репостнул что-то незаконное, правоохранители это заметили – и вуаля: уголовное дело уже возбуждено. Узнаёшь об этом, когда тебе прилетает повестка.
Новый законопроект предлагает более мягкий вариант: сначала предупреждают, а уже потом, если ничего не удалил, заводят дело.
Как это будет работать?
1 Тебе п…