React: Guida Completa a useReducer per una Ge

Quando si lavora con React, la gestione dello stato è una delle sfide principali. Spesso si usa useState, ma per stati complessi esiste un’alternativa più potente: useReducer. Questo hook è particolarmente utile per gestire logiche più strutturate e scalabili.

Io sono Marco Crotti, sviluppatore React a Bergamo, e nel mio sito marcocrotti.it condivido guide pratiche su React. In questo articolo ti mostrerò come e quando usare useReducer per migliorare la tua gestione dello stato.

Cos’è useReducer?

useReducer è un hook di React che fornisce un’alternativa a useState, permettendo di gestire stati più complessi attraverso una funzione reducer. La sintassi di base è la seguente:

const [state, dispatch] = useReducer(reducer, initialState);

Qui:

state è lo stato attuale.
dispatch è una funzione che invia azioni al reducer.
reducer è una funzione che specifica come lo stato deve cambiare.
initialState è il valore iniziale dello stato.

Vediamo un esempio pratico.

Quando Usare useReducer?

Usa useReducer invece di useState quando:

Hai uno stato con più sotto-valori interdipendenti.
La logica di aggiornamento è complessa (es. con più azioni).
Vuoi separare la gestione dello stato dalla UI.

Esempio: Un Contatore con useReducer

Immaginiamo di dover creare un contatore con tre azioni: incrementare, decrementare e resettare. Con useReducer possiamo gestire lo stato in modo più organizzato.

import { useReducer } from "react";
    const initialState = { count: 0 };
    function reducer(state, action) {
        switch (action.type) {
            case "increment": return { count: state.count + 1 };
            case "decrement": return { count: state.count - 1 };
            case "reset": return initialState;
            default: return state; 
        } 
    }

    export default function Counter() {
        const [state, dispatch] = useReducer(reducer, initialState);
        return (
          <div>
            <p>Contatore: {state.count}</p>
            <button onClick={() => dispatch({ type: "increment" })}>+</button>
            <button onClick={() => dispatch({ type: "decrement" })}>-</button>
            <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
          </div>); 
    }

Vantaggi di useReducer

Rispetto a useState, useReducer offre diversi vantaggi:

Codice più chiaro: la gestione dello stato è separata dalla logica della UI.
Facilità di test: il reducer è una funzione pura, quindi facile da testare.
Migliore scalabilità: perfetto per applicazioni più complesse.

useReducer vs useState: Quando Usare Quale?

Se lo stato è semplice, useState è sufficiente. Ma quando la logica diventa più articolata, con molteplici azioni e dipendenze tra stati, useReducer diventa la scelta ideale.

Per esempio:

Un semplice input? → useState.
Gestione di una lista con filtri e ordinamenti? → useReducer.

Conclusione

Il React Hook useReducer è uno strumento potente per gestire stati complessi in modo chiaro e scalabile. Se il tuo progetto sta crescendo e la gestione dello stato con useState diventa difficile, prova ad usare useReducer.