Hook di React: tutti gli hook spiegati con esempi dal vivo

Gli hook di React sono funzioni il cui nome inizia con use che permettono a un function component di usare le funzionalità di React: useState per ricordare un valore, useEffect per eseguire codice dopo il rendering, useRef per tenere un nodo DOM, useContext per leggere dati condivisi. Li chiami in cima al tuo componente, e React conserva i loro valori tra un rendering e l'altro.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

Qui lavorano insieme quattro hook. useState memorizza il testo, useRef punta all'input così il pulsante può dargli il focus, useMemo conserva la lista filtrata finché la query non cambia, e useEffect registra un log dopo ogni rendering in cui la query è cambiata. Scrivi an e guarda la Console: una riga per ogni tasto, dopo che la lista si è aggiornata.

Perché esistono gli hook

Prima di React 16.8, un componente che aveva bisogno di stato o di codice del ciclo di vita doveva essere una classe. La logica di una funzionalità era divisa tra componentDidMount, componentDidUpdate e componentWillUnmount, e condividerla tra componenti significava usare mixin (che non hanno mai funzionato con la sintassi delle classi), higher order component o render prop, che racchiudevano tutti il tuo albero in livelli aggiuntivi.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

Con gli hook la stessa funzionalità vive in un solo punto: l'effetto avvia il timer e la sua funzione di cleanup lo ferma.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

Nascondi l'orologio e la Console stampa timer stopped: React ha eseguito la funzione di cleanup quando Clock ha lasciato lo schermo. Mostralo di nuovo e parte un timer nuovo. I class component funzionano ancora in React 19, ma il codice nuovo usa gli hook.

Tutti gli hook integrati

React 19.2 raggruppa i suoi hook in base a ciò che danno a un componente. Userai i primi due gruppi ogni giorno e gli altri quando un problema specifico li richiede.

use, useActionState, useOptimistic e useFormStatus sono arrivati con React 19, e useEffectEvent è diventato stabile nella 19.2. Tutti gli altri hook della lista funzionano anche in React 18.

Lo stato provoca rendering, i ref no

Non tutti gli hook provocano un rendering. useState e useReducer sì: cambi il loro valore e React ridisegna il componente. useRef ti consegna un oggetto il cui campo current puoi cambiare liberamente, e React non esegue mai un nuovo render per questo. Ciò lo rende il posto giusto per l'id di un timer, un valore precedente o un conteggio che lo schermo non mostra.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

useReducer contiene il carrello e useState contiene la nota; entrambi provocano un rendering quando cambiano, e l'effetto registra una riga per ogni rendering. L'effetto cambia anche commits.current, eppure quella modifica non provoca mai un rendering di per sé, quindi il log non entra in un ciclo. Il conteggio viene aggiornato in un effetto invece che nel corpo del componente perché il corpo non dovrebbe cambiare nulla mentre esegue il rendering.

Le regole degli hook

Ogni hook segue due regole:

1. Chiama gli hook al livello più alto del tuo componente, mai dentro una condizione, un ciclo o una funzione annidata.
2. Chiama gli hook solo dai function component o dai tuoi hook personalizzati.

React non riconosce gli hook per nome. Li riconosce dall'ordine in cui li chiami, e si aspetta che quell'ordine sia lo stesso a ogni rendering. Un hook dentro un if sposterebbe tutti gli hook successivi. La pagina sulle regole degli hook mostra cosa si rompe e come sistemarlo. use è l'unica eccezione: può essere chiamato dentro una condizione.

Il tuo primo hook personalizzato

Quando due componenti hanno bisogno della stessa logica con stato, spostala in una funzione il cui nome inizia con use. Quella funzione può chiamare qualsiasi altro hook. Ogni componente che la chiama riceve il proprio stato.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

Entrambi i contatori eseguono lo stesso hook, ma cliccarne uno lascia stare l'altro: un hook personalizzato condivide la logica, non lo stato. Aggiungi una funzione decrement a useCounter e un pulsante che la chiama, ed entrambi i contatori la ottengono insieme. Altri schemi (useToggle, useDebounce, useLocalStorage) sono nella pagina sugli hook personalizzati.

Quale hook scegliere

• Lo schermo deve cambiare quando un valore cambia: useState, oppure useReducer quando molti eventi aggiornano lo stesso stato.
• Devi comunicare con qualcosa al di fuori di React (un timer, una sottoscrizione, una richiesta): useEffect.
• Ti serve un nodo DOM o un valore che lo schermo non mostra: useRef.
• Molti componenti in profondità nell'albero hanno bisogno dello stesso valore: useContext.
• Un rendering è lento a causa di un calcolo o perché un figlio memorizzato esegue un nuovo render: useMemo e useCallback. React Compiler può aggiungere questa memoizzazione per te, ma scriverla a mano funziona ancora ed è ancora comune.
• La digitazione sembra rallentata perché l'aggiornamento che la segue è pesante: useTransition o useDeferredValue.