Creare un hook per lo storage in React

Può capitare spesso di dover usare localStorage/sessionStorage in applicazioni scritte in React.

Ma invece di richiamare ogni volta le varie funzioni get/set, possiamo creare un hook personalizzato.

Qui sotto un esempio:

import {useState} from "react";

const storageHooks = (chiave: string, valoreDefault: string) => {
    const [valoreStorage, setValoreStorage] = useState(() => {
        try {
            const valore = localStorage.getItem(chiave);

            if (valore) {
                return JSON.parse(valore);
            } else {
                localStorage.setItem(chiave, JSON.stringify(valoreDefault));
                return valoreDefault;
            }
        } catch (e) {
            return valoreDefault;
        }
    });

    const setValore = nuovoValore => {
        try {
            localStorage.setItem(chiave, JSON.stringify(nuovoValore));
        } catch (e) {
        }

        setValoreStorage(nuovoValore);
    };

    return [valoreStorage, setValore];
}

export default storageHooks;

Qui ho usato localStorage, ma potreste fare una modifica per rendere la scelta "dinamica".

A questo punto nel nostro componente:

import React from 'react';
import storageHooks from "./hooks/storage_hooks";

function App() {
    const [valore1, setValore1] = storageHooks('valore1', 'CIAO');

    return (
        <div className="App">
            <p>{valore1}</p>
            <button onClick={() => setValore1('ME NE VADO')}>Imposta valore</button>
        </div>
    );
}

export default App;

Enjoy!