Hook personalizzati in React: come scriverli, con esempi

Un hook personalizzato è una funzione il cui nome inizia con use e che chiama altri hook. Ne scrivi uno quando due componenti hanno bisogno della stessa logica con stato: sposta le chiamate a useState e useEffect nella funzione, restituisci ciò che serve al componente e chiamala da ogni componente.

import { useState } from 'react';

function useToggle(initial = false) {
    const [on, setOn] = useState(initial);
    const toggle = () => setOn((v) => !v);
    return [on, toggle];
}

function Spoiler({ title, children }) {
    const [open, toggle] = useToggle();
    return (
        <div style={{ marginBottom: 8 }}>
            <button onClick={toggle}>{open ? 'Hide' : 'Show'} {title}</button>
            {open && <p>{children}</p>}
        </div>
    );
}

export default function App() {
    return (
        <div>
            <Spoiler title="ending">The butler did it.</Spoiler>
            <Spoiler title="sequel">The butler did it again.</Spoiler>
        </div>
    );
}

Entrambi gli spoiler chiamano useToggle, e aprirne uno lascia chiuso l'altro. Ogni chiamata esegue il proprio useState, quindi ogni componente riceve il proprio valore. Un hook personalizzato condivide la logica, non lo stato.

Le regole per scriverne uno

• Il nome inizia con use e una lettera maiuscola: useToggle, useOnlineStatus. La regola di lint per gli hook usa il prefisso per trovare le chiamate agli hook e controllarle.
• Chiama almeno un hook. Una funzione di supporto che non chiama hook è una funzione normale; chiamala formatDate, non useFormatDate, così può essere chiamata ovunque, anche dentro le condizioni.
• Segue le regole degli hook: chiama gli hook al suo livello più alto, e chiamalo solo da componenti o da altri hook personalizzati.
• Restituisce ciò che è utile. Un array ([on, toggle]) è comodo quando chi lo chiama rinomina i valori; un oggetto ({ data, loading, error }) si legge meglio da tre valori in su.

useLocalStorage: uno stato che sopravvive al ricaricamento

useState dimentica tutto al ricaricamento. Questo hook legge il valore iniziale da localStorage e riscrive lì ogni modifica.

import { useState, useEffect } from 'react';

function readStored(key, fallback) {
    try {
        const raw = window.localStorage.getItem(key);
        return raw === null ? fallback : JSON.parse(raw);
    } catch {
        console.warn('localStorage is not available, keeping the value in memory');
        return fallback;
    }
}

function useLocalStorage(key, initial) {
    const [value, setValue] = useState(() => readStored(key, initial));

    useEffect(() => {
        try {
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch {
            // Storage blocked or full: the value still works for this visit
        }
    }, [key, value]);

    return [value, setValue];
}

export default function App() {
    const [name, setName] = useLocalStorage('demo-name', '');
    return (
        <div>
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />
            <p>Hello, {name || 'stranger'}.</p>
        </div>
    );
}

L'anteprima gira in un frame isolato in cui il browser blocca localStorage, quindi qui vedrai l'avviso nella Console e l'hook ripiega su un semplice stato. In una pagina normale il nome sopravvive al ricaricamento. Il try/catch non serve solo per questa anteprima: navigazione privata, cookie bloccati e una quota piena fanno tutti generare errori allo storage anche nelle app reali. Passare una funzione a useState significa che lo storage viene letto una sola volta, al primo rendering.

useDebounce: aspettare che l'utente smetta di scrivere

Una casella di ricerca non dovrebbe lanciare una richiesta a ogni tasto. useDebounce restituisce una copia di un valore che si aggiorna solo dopo che ha smesso di cambiare per un certo ritardo.

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
    const [debounced, setDebounced] = useState(value);

    useEffect(() => {
        const id = setTimeout(() => setDebounced(value), delay);
        return () => clearTimeout(id);
    }, [value, delay]);

    return debounced;
}

export default function App() {
    const [text, setText] = useState('');
    const query = useDebounce(text, 500);

    useEffect(() => {
        if (query) console.log('search for:', query);
    }, [query]);

    return (
        <div>
            <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Search" />
            <p>Typed: {text}</p>
            <p>Debounced: {query}</p>
        </div>
    );
}

Scrivi una parola velocemente: Typed segue ogni tasto, Debounced si allinea mezzo secondo dopo che ti sei fermato, e la Console registra una sola ricerca. Ogni tasto cambia value, quindi React esegue la funzione di cleanup (clearTimeout) prima di avviare un nuovo timer. Cambia 500 in 0 e ogni tasto registra la propria ricerca.

useWindowWidth: iscriversi con una funzione di cleanup

Un hook che ascolta il browser deve rimuovere il proprio listener quando il componente sparisce, altrimenti ogni montaggio ne lascia uno indietro.

import { useState, useEffect } from 'react';

function useWindowWidth() {
    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const onResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', onResize);
        console.log('resize listener added');
        return () => {
            window.removeEventListener('resize', onResize);
            console.log('resize listener removed');
        };
    }, []);

    return width;
}

function WidthBadge() {
    const width = useWindowWidth();
    return <p>This frame is {width}px wide: {width < 500 ? 'narrow' : 'wide'} layout.</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Unmount' : 'Mount'} badge</button>
            {show && <WidthBadge />}
        </div>
    );
}

Ridimensiona la finestra del browser e il numero la segue. Clicca il pulsante e la Console mostra il listener che viene rimosso. Elimina il return dall'effetto, poi monta e smonta qualche volta: ottieni ogni volta una riga added e nessuna removed, quindi i vecchi listener si accumulano. Per valori del browser come questo, useSyncExternalStore è l'hook che React ha creato apposta, ed è un'ottima cosa da chiamare dentro un hook personalizzato.

La logica è condivisa, lo stato no

Due componenti che chiamano lo stesso hook ricevono due copie separate di tutto ciò che contiene. Questo sorprende chi si aspetta che un hook funzioni come una variabile globale.

import { useState } from 'react';

function useCounter() {
    const [count, setCount] = useState(0);
    return [count, () => setCount((c) => c + 1)];
}

function Counter({ name }) {
    const [count, increment] = useCounter();
    return (
        <p>
            {name}: {count} <button onClick={increment}>+1</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter name="First" />
            <Counter name="Second" />
        </div>
    );
}

Clicca uno dei due pulsanti e si muove solo quel contatore. Se entrambi devono mostrare lo stesso numero, sposta lo stato in App e passalo verso il basso, oppure mettilo nel context. Un hook personalizzato può racchiudere quello stato condiviso per comodità (useCart() che legge un CartContext), ma la condivisione arriva dal context, non dall'hook.

Quando scrivere un hook personalizzato

Estrai un hook quando lo stesso gruppo di chiamate agli hook compare in due componenti, o quando la logica degli effetti di un componente è abbastanza lunga che un nome la spiegherebbe meglio (useOnlineStatus() si legge meglio di venti righe di listener). Non racchiudere una singola chiamata a useState in un hook solo per rinominarla, e non scrivere hook che chiamano solo useEffect per impostare lo stato dalle props; calcola invece quel valore durante il rendering.