Me encuentro trabajando en un proyecto usando React y NextJS . Básicamente me ha surgido la necesidad de persistir ciertos valores en localStorage del navegador.

// use-store.ts
import { useEffect, useState } from "react";

export default function useStoreState(key: string, defaultValue?: any) {
    const [value, setValue] = useState(defaultValue);
    useEffect(() => {
        const localValue = window.localStorage.getItem(key);
        if (localValue) {
            setValue(JSON.parse(localValue));
        }
    }, [key]);

    useEffect(() => {
        window.localStorage.setItem(key, JSON.stringify(value));
    }, [key, value]);

    return [value, setValue];
};

En la vista o componentes puedes utilizar el hook de la siguiente forma:

  const [item, setItem] = useStoreState('wpe_item')