# Guida a useReducer in React

> Guida pratica all'hook useReducer di React: come funziona, quando preferirlo a useState e un esempio completo per gestire stati complessi.

- Autore / Author: Diego Betto (https://diegobetto.com/about/)
- Pubblicato / Published: 2023-12-06
- URL: https://diegobetto.com/react-usereducer/
- Tag: react, hook, useReducer, stato, useState

React, la libreria JavaScript di sviluppo di interfacce utente, offre il potente `useReducer` hook per una gestione avanzata dello stato. In questa guida, esploreremo come `useReducer` può migliorare l'efficienza della gestione dello stato in applicazioni React complesse.

## Che cos'è useReducer in React?

`useReducer` è un hook React progettato per gestire stati complessi in modo più avanzato rispetto a `useState`. Se la tua applicazione richiede una gestione più strutturata e sofisticata dello stato, `useReducer` è la scelta ideale per migliorare le prestazioni e la chiarezza del codice.

## Quando utilizzare useReducer

La scelta tra `useState` e `useReducer` dipende dalla complessità del tuo stato e dalla natura delle azioni di aggiornamento. Considera `useReducer` quando hai uno stato complesso e azioni di aggiornamento non banali.
Se invece lo stato che devi aggiornare è più semplice, ad esempio l'apertura di una modale o di un accordion, puoi tranquillamente utilizzare `useState`.

## Come implementare useReducer, un semplice esempio

L'utilizzo di `useReducer` richiede la definizione di uno stato iniziale e di un riduttore che gestisca le azioni di aggiornamento.
Di seguito un esempio pratico:

```jsx
import { useReducer } from "react";

// definiamo lo stato iniziale
const initialState = {
  count: 0,
};

// definiamo il reducer, ad ogni azioni facciamo corrispondere un nuovo stato
const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  // richiamiamo l'hook `useReducer` che restituisce uno stato
  // e il dispatcher che ci permette di eseguire le action che
  // abbiamo definito nel reducer.
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "increment" })}>Incrementa</button>
      <button onClick={() => dispatch({ type: "decrement" })}>Decrementa</button>
    </div>
  );
};
```

## Vantaggi di useReducer

1. **Gestione Strutturata delle Azioni**: Il riduttore offre una gestione più chiara delle azioni, favorendo una migliore comprensione.

2. **Ottimizzazione dello Stato Complesso**: `useReducer` eccelle nella gestione di stati complessi, garantendo che le informazioni rilevanti siano facilmente indicizzate. Nessuno ci vieta di utilizzare `useState`, ma solitamente la gestione tende a diventare più impegnativa con il crescere della complessità dello stato da gestire.
   Al contrario, dovendo gestire uno stato semplice, l'utilizzo di `useReducer` può risultare eccessivamente prolisso.

3. **Miglioramento delle Prestazioni**: In determinati scenari, `useReducer` può generare codice più efficiente, contribuendo indirettamente a una migliore le prestazioni. Scenari abbastanza particolari, nella gran parte delle situazioni queste differenze non sono percettibili.

## Conclusioni: useReducer per un Codice React

`useReducer` è uno strumento potente per migliorare la gestione dello stato in React, rendendo il codice più efficiente.
La scelta tra `useState` e `useReducer` deve essere guidata dalla complessità del tuo stato e dalle esigenze specifiche della tua applicazione.

Se invece il tuo caso d'uso è condividere lo stato tra più componenti, dai un'occhiata anche alla guida a [useContext](https://diegobetto.com/react-usecontext/).

Trovi maggiori informazioni al seguente link [useReducer su react.dev](https://react.dev/reference/react/useReducer)