useLocalStorage

storage.ts

export function getLocalStorageItem<T>(key: string, initialValue: T): T {
    try {
        const item = window.localStorage.getItem(key);

        return item ? JSON.parse(item) : initialValue;
    } catch (error) {
        console.warn(`Could not get localStorage key "${key}"`, error);

        return initialValue;
    }
}

export function setLocalStorageItem<T>(
    key: string,
    value: T | null | undefined
): void {
    if (value === null || value === undefined) {
        try {
            window.localStorage.removeItem(key);
        } catch (error) {
            console.warn(`Could not remove localStorage key "${key}"`, error);
        }
    } else {
        try {
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch (error) {
            console.warn(`Could not set localStorage key "${key}"`, error);
        }
    }
}

useLocalStorage.ts

import { useCallback } from 'react';
import { getLocalStorageItem, setLocalStorageItem } from '../utils/storage';

type SetValue<T> = (
    value: T | null | undefined | ((prevValue: T) => T)
) => void;
type UseLocalStorageReturn<T> = [T, SetValue<T>];

export function useLocalStorage<T = unknown>(
    key: string,
    initialValue: T
): UseLocalStorageReturn<T> {
    const value = getLocalStorageItem<T>(key, initialValue);
    const setValue = useCallback<SetValue<T>>(
        (value) => {
            if (value instanceof Function) {
                setLocalStorageItem(
                    key,
                    value(getLocalStorageItem(key, initialValue))
                );
            } else {
                setLocalStorageItem(key, value);
            }
        },
        [key, initialValue]
    );

    return [value, setValue];
}