Context API e useReducer

Introduzione

Quando si costruiscono applicazioni React complesse, condividere lo state tra componenti può richiedere passare props attraverso molti livelli (prop drilling). Questo articolo esplora la Context API per condividere dati senza prop drilling e l’hook useReducer per gestire state complesso utilizzando il pattern del reducer.

Il Problema del Prop Drilling

In applicazioni React complesse, si ha spesso bisogno di condividere lo state tra componenti che si trovano in punti diversi dell’albero dei componenti. Un componente potrebbe dover visualizzare dei dati, mentre un altro componente, completamente separato, potrebbe dover aggiornare quegli stessi dati.

La soluzione più immediata è sollevare lo state al componente comune più vicino che ha accesso a tutti i componenti interessati, e poi passare i dati e le funzioni di aggiornamento attraverso le props. Questo approccio funziona, ma può portare a quello che viene chiamato prop drilling.

Cos’è il Prop Drilling

Il prop drilling si verifica quando si devono passare props attraverso molti livelli di componenti, anche se la maggior parte di questi componenti non utilizza direttamente quei dati. Essi li ricevono solo per passarli ai componenti figli.

1
function App() {
2
  const [cartItems, setCartItems] = useState([]);
3

4
  return (
5
    <>
6
      <Header cartItems={cartItems} />
7
      <Shop onAddToCart={handleAddToCart} />
8
    </>
9
  );
10
}
11

12
function Header({ cartItems }) {
13
  // Header non usa cartItems direttamente, ma li passa a CartModal
14
  return (
15
    <header>
16
      <CartModal cartItems={cartItems} />
17
    </header>
18
  );
19
}
20

21
function CartModal({ cartItems }) {
22
  // CartModal usa finalmente cartItems
23
  return <div>{cartItems.length} items</div>;
24
}
25

26
function Shop({ onAddToCart }) {
27
  // Shop non usa onAddToCart direttamente, ma lo passa a Product
28
  return (
29
    <div>
30
      <Product onAddToCart={onAddToCart} />
31
    </div>
32
  );
33
}
34

35
function Product({ onAddToCart }) {
36
  // Product usa finalmente onAddToCart
37
  return <button onClick={() => onAddToCart(id)}>Add to Cart</button>;
38
}

Il prop drilling aumenta il boilerplate e rende difficile capire quali componenti utilizzano effettivamente i dati e quali li stanno solo inoltrando.

Component Composition come Soluzione Parziale

Una prima soluzione al prop drilling è utilizzare la component composition, sfruttando la prop speciale children per ridurre i livelli di nesting e permettere ai componenti genitori di renderizzare direttamente i componenti che hanno bisogno dei dati.

Come Funziona la Component Composition

L’idea è trasformare componenti che fungono solo da wrapper in componenti che accettano children e li renderizzano direttamente, permettendo al componente genitore di passare direttamente i dati necessari ai componenti che li utilizzano.

1
// Prima: prop drilling
2
function App() {
3
  return <Shop onAddToCart={handleAddToCart} />;
4
}
5

6
function Shop({ onAddToCart }) {
7
  return <Product onAddToCart={onAddToCart} />;
8
}

1
// Dopo: component composition
2
function App() {
3
  return (
4
    <Shop>
5
      <Product onAddToCart={handleAddToCart} />
6
    </Shop>
7
  );
8
}
9

10
function Shop({ children }) {
11
  return <div className="shop">{children}</div>;
12
}

La component composition aiuta ma non scala bene quando i componenti sono profondamente annidati o in rami diversi dell’albero. Per questi casi serve la Context API.

La Context API di React

La Context API è una funzionalità integrata in React progettata specificamente per condividere dati tra componenti senza dover passare props attraverso ogni livello dell’albero dei componenti.

Cos’è la Context API

L’idea alla base della Context API è creare un valore di contesto che viene “fornito” a un gruppo di componenti. Questo valore può essere facilmente collegato allo state, permettendo a qualsiasi componente che ha accesso al contesto di leggere e aggiornare lo state senza dover ricevere props.

Quando un componente è “avvolto” da un Provider del contesto, può accedere direttamente al valore del contesto utilizzando l’hook useContext (o use in React 19+), eliminando completamente la necessità di prop drilling.

Creare un Context

Per creare un context, si utilizza la funzione createContext di React:

1
import { createContext } from 'react';
2

3
// Creazione del context con un valore iniziale
4
export const CartContext = createContext({
5
  items: [],
6
  addItemToCart: () => {},
7
});

Il valore passato a createContext è il valore iniziale (o default) che verrà utilizzato se un componente cerca di accedere al context senza essere avvolto da un Provider. Questo valore è utile anche per migliorare l’autocompletamento nell’IDE.

Fornire il Context con il Provider

Dopo aver creato il context, si deve fornirlo ai componenti utilizzando il componente Provider. Il Provider deve avvolgere tutti i componenti che hanno bisogno di accedere al context.

1
import { CartContext } from './store/shopping-cart-context';
2

3
function App() {
4
  return (
5
    <CartContext.Provider value={{ items: [] }}>
6
      <Header />
7
      <Shop />
8
    </CartContext.Provider>
9
  );
10
}

Nota importante: In React 19+, si può usare CartContext direttamente come componente. In versioni precedenti (React 18 e inferiori), si deve usare CartContext.Provider. Per compatibilità con versioni precedenti, si usa CartContext.Provider.

Il value prop è obbligatorio e contiene il valore effettivo che si vuole condividere attraverso il context. Questo valore può essere qualsiasi cosa: un numero, una stringa, un oggetto, un array, o anche funzioni.

Collegare il Context allo State

Per rendere il context dinamico, si collega il valore del context allo state del componente:

1
function App() {
2
  const [shoppingCart, setShoppingCart] = useState({
3
    items: []
4
  });
5

6
  return (
7
    <CartContext.Provider value={shoppingCart}>
8
      <Header />
9
      <Shop />
10
    </CartContext.Provider>
11
  );
12
}

Ora, quando lo state shoppingCart cambia, tutti i componenti che accedono al context vedranno automaticamente il nuovo valore.

Consumare il Context con useContext

Per accedere al valore del context in un componente, si utilizza l’hook useContext:

1
import { useContext } from 'react';
2
import { CartContext } from './store/shopping-cart-context';
3

4
function Cart() {
5
  const cartCtx = useContext(CartContext);
6

7
  return (
8
    <div>
9
      {cartCtx.items.length === 0 ? (
10
        <p>No items in cart</p>
11
      ) : (
12
        <ul>
13
          {cartCtx.items.map(item => (
14
            <li key={item.id}>{item.name}</li>
15
          ))}
16
        </ul>
17
      )}
18
    </div>
19
  );
20
}

useContext riceve il context object come argomento e restituisce il valore corrente del context. Se il componente non è avvolto da un Provider, restituirà il valore iniziale passato a createContext.

1
import { use } from 'react';
2

3
function Cart() {
4
  const cartCtx = use(CartContext);
5
  // ... resto del codice
6
}

Condividere Funzioni attraverso il Context

Oltre a condividere dati, si possono anche condividere funzioni attraverso il context. Questo permette ai componenti di aggiornare lo state senza dover ricevere funzioni come props:

1
function App() {
2
  const [shoppingCart, setShoppingCart] = useState({
3
    items: []
4
  });
5

6
  function handleAddItemToCart(id) {
7
    setShoppingCart(prevCart => {
8
      // Logica per aggiungere l'item al carrello
9
      const existingItem = prevCart.items.find(item => item.id === id);
10

11
      if (existingItem) {
12
        return {
13
          items: prevCart.items.map(item =>
14
            item.id === id
15
              ? { ...item, quantity: item.quantity + 1 }
16
              : item
17
          )
18
        };
19
      } else {
20
        return {
21
          items: [...prevCart.items, { id, quantity: 1 }]
22
        };
23
      }
24
    });
25
  }
26

27
  const contextValue = {
28
    items: shoppingCart.items,
29
    addItemToCart: handleAddItemToCart
30
  };
31

32
  return (
33
    <CartContext.Provider value={contextValue}>
34
      <Header />
35
      <Shop />
36
    </CartContext.Provider>
37
  );
38
}

Ora qualsiasi componente può chiamare addItemToCart senza dover riceverla come prop:

1
function Product({ id }) {
2
  const cartCtx = useContext(CartContext);
3

4
  return (
5
    <button onClick={() => cartCtx.addItemToCart(id)}>
6
      Add to Cart
7
    </button>
8
  );
9
}

Pattern: Context Provider Component

Quando si gestisce context complessi con molto state e logica, è una buona pratica creare un componente Provider separato che gestisce tutto lo state e la logica del context. Questo mantiene il componente App pulito e permette di avere più context senza ingombrare un singolo componente.

1
import { createContext, useState } from 'react';
2

3
export const CartContext = createContext({
4
  items: [],
5
  addItemToCart: () => {},
6
  updateItemQuantity: () => {},
7
  removeItem: () => {}
8
});
9

10
export default function CartContextProvider({ children }) {
11
  const [shoppingCart, setShoppingCart] = useState({
12
    items: []
13
  });
14

15
  function handleAddItemToCart(id) {
16
    setShoppingCart(prevCart => {
17
      const existingItem = prevCart.items.find(item => item.id === id);
18

19
      if (existingItem) {
20
        return {
21
          items: prevCart.items.map(item =>
22
            item.id === id
23
              ? { ...item, quantity: item.quantity + 1 }
24
              : item
25
          )
26
        };
27
      } else {
28
        return {
29
          items: [...prevCart.items, { id, quantity: 1 }]
30
        };
31
      }
32
    });
33
  }
34

35
  function handleUpdateItemQuantity(id, amount) {
36
    setShoppingCart(prevCart => ({
37
      items: prevCart.items.map(item =>
38
        item.id === id
39
          ? { ...item, quantity: item.quantity + amount }
40
          : item
41
      ).filter(item => item.quantity > 0)
42
    }));
43
  }
44

45
  function handleRemoveItem(id) {
46
    setShoppingCart(prevCart => ({
47
      items: prevCart.items.filter(item => item.id !== id)
48
    }));
49
  }
50

51
  const contextValue = {
52
    items: shoppingCart.items,
53
    addItemToCart: handleAddItemToCart,
54
    updateItemQuantity: handleUpdateItemQuantity,
55
    removeItem: handleRemoveItem
56
  };
57

58
  return (
59
    <CartContext.Provider value={contextValue}>
60
      {children}
61
    </CartContext.Provider>
62
  );
63
}

1
import CartContextProvider from './store/shopping-cart-context';
2

3
function App() {
4
  return (
5
    <CartContextProvider>
6
      <Header />
7
      <Shop />
8
    </CartContextProvider>
9
  );
10
}

Re-render quando il Context Cambia

È importante capire che quando il valore del context cambia, tutti i componenti che utilizzano useContext per accedere a quel context verranno ri-renderizzati automaticamente da React. Questo è il comportamento desiderato, perché permette all’interfaccia utente di aggiornarsi quando i dati cambiano.

React ri-esegue la funzione del componente quando:

• Lo state interno del componente cambia
• Le props del componente cambiano
• Il valore del context a cui il componente è connesso cambia

Questo garantisce che l’interfaccia utente sia sempre sincronizzata con i dati.

Consumer Component (Approccio Alternativo)

Oltre a useContext, esiste un approccio alternativo per accedere al context utilizzando il componente Consumer. Questo approccio è meno comune e più verboso, ma può essere utile in alcuni casi specifici o quando si lavora con codebase più vecchie.

1
import { CartContext } from './store/shopping-cart-context';
2

3
function Cart() {
4
  return (
5
    <CartContext.Consumer>
6
      {(cartCtx) => (
7
        <div>
8
          {cartCtx.items.length === 0 ? (
9
            <p>No items in cart</p>
10
          ) : (
11
            <ul>
12
              {cartCtx.items.map(item => (
13
                <li key={item.id}>{item.name}</li>
14
              ))}
15
            </ul>
16
          )}
17
        </div>
18
      )}
19
    </CartContext.Consumer>
20
  );
21
}

useReducer: Gestire State Complesso

Quando si gestisce state complesso con molte proprietà e logica di aggiornamento, useState può diventare difficile da gestire. useReducer è un’alternativa che utilizza il pattern del reducer per organizzare la logica di aggiornamento.

Sintassi Base

1
import { useReducer } from 'react';
2

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

• reducer: Funzione che specifica come lo state viene aggiornato
• initialState: Valore iniziale dello state
• state: State corrente
• dispatch: Funzione per inviare azioni al reducer

Esempio Base: Counter

1
import { useReducer } from 'react';
2

3
// Reducer definito FUORI dal componente
4
function reducer(state, action) {
5
  if (action.type === 'incremented_age') {
6
    return { age: state.age + 1 };
7
  }
8
  throw Error('Unknown action.');
9
}
10

11
export default function Counter() {
12
  const [state, dispatch] = useReducer(reducer, { age: 42 });
13

14
  return (
15
    <>
16
      <button onClick={() => dispatch({ type: 'incremented_age' })}>
17
        Increment age
18
      </button>
19
      <p>Hello! You are {state.age}.</p>
20
    </>
21
  );
22
}

Come funziona: dispatch({ type: 'incremented_age' }) invia un’azione al reducer, che calcola il nuovo state. React aggiorna lo state e ri-renderizza il componente.

Scrivere un Reducer

Il reducer è una funzione pura che riceve (state, action) e restituisce il nuovo state. Usa switch per gestire diversi tipi di azioni:

1
function reducer(state, action) {
2
  switch (action.type) {
3
    case 'incremented_age': {
4
      return {
5
        ...state,
6
        age: state.age + 1
7
      };
8
    }
9
    case 'changed_name': {
10
      return {
11
        ...state,
12
        name: action.nextName
13
      };
14
    }
15
    default: {
16
      throw Error('Unknown action: ' + action.type);
17
    }
18
  }
19
}

Regole importanti:

• Deve essere definito fuori dal componente
• Deve essere puro: non modifica lo state esistente, restituisce sempre un nuovo oggetto
• Usa ...state per copiare tutte le proprietà esistenti

1
// ❌ SBAGLIATO: modifica lo state esistente
2
function reducer(state, action) {
3
  state.age++;  // Non fare questo!
4
  return state;
5
}
6

7
// ✅ CORRETTO: restituisce un nuovo oggetto
8
function reducer(state, action) {
9
  return { ...state, age: state.age + 1 };
10
}

Dispatchare Azioni

1
dispatch({ type: 'ACTION_TYPE', ...altriDati });

Importante: Dopo dispatch, lo state non cambia immediatamente. Si aggiorna nel prossimo render (comportamento identico a useState).

Struttura delle Azioni

Le azioni hanno una proprietà type (obbligatoria) e possono avere altre proprietà per i dati:

1
// Azione semplice
2
dispatch({ type: 'RESET_CART' });
3

4
// Azione con payload (convenzione comune)
5
dispatch({ type: 'ADD_ITEM', payload: { id: 1, quantity: 2 } });
6

7
// Azione con proprietà specifiche
8
dispatch({ type: 'UPDATE_ITEM', productId: 1, amount: 1 });

Quando Usare useReducer vs useState

useReducer quando:

• State complesso (oggetti/array con molte proprietà)
• Logiche di aggiornamento complesse
• Molte funzioni di aggiornamento simili

useState quando:

• State semplice (numeri, stringhe, booleani)
• Logiche di aggiornamento semplici
• Poche funzioni di aggiornamento

Esempio: Todo List

1
function todosReducer(state, action) {
2
  switch (action.type) {
3
    case 'added':
4
      return [...state, { id: action.id, text: action.text, done: false }];
5
    case 'changed':
6
      return state.map(todo =>
7
        todo.id === action.todo.id ? action.todo : todo
8
      );
9
    case 'deleted':
10
      return state.filter(todo => todo.id !== action.id);
11
    default:
12
      throw Error('Unknown action: ' + action.type);
13
  }
14
}
15

16
function TodoList() {
17
  const [todos, dispatch] = useReducer(todosReducer, []);
18

19
  function handleAddTodo(text) {
20
    dispatch({ type: 'added', id: nextId++, text });
21
  }
22

23
  function handleDeleteTodo(id) {
24
    dispatch({ type: 'deleted', id });
25
  }
26

27
  // ... resto del componente
28
}

Combinare Context API e useReducer

Pattern comune: usare useReducer all’interno di un Context Provider per gestire state complesso e eliminare prop drilling.

1
import { createContext, useReducer } from 'react';
2

3
export const CartContext = createContext({
4
  items: [],
5
  addItemToCart: () => {},
6
  removeItem: () => {}
7
});
8

9
function cartReducer(state, action) {
10
  switch (action.type) {
11
    case 'ADD_ITEM': {
12
      const existingItem = state.items.find(item => item.id === action.payload);
13
      if (existingItem) {
14
        return {
15
          items: state.items.map(item =>
16
            item.id === action.payload
17
              ? { ...item, quantity: item.quantity + 1 }
18
              : item
19
          )
20
        };
21
      }
22
      return {
23
        items: [...state.items, { id: action.payload, quantity: 1 }]
24
      };
25
    }
26
    case 'REMOVE_ITEM':
27
      return {
28
        items: state.items.filter(item => item.id !== action.payload)
29
      };
30
    default:
31
      return state;
32
  }
33
}
34

35
export default function CartContextProvider({ children }) {
36
  const [shoppingCart, dispatch] = useReducer(cartReducer, { items: [] });
37

38
  const contextValue = {
39
    items: shoppingCart.items,
40
    addItemToCart: (id) => dispatch({ type: 'ADD_ITEM', payload: id }),
41
    removeItem: (id) => dispatch({ type: 'REMOVE_ITEM', payload: id })
42
  };
43

44
  return (
45
    <CartContext.Provider value={contextValue}>
46
      {children}
47
    </CartContext.Provider>
48
  );
49
}

Uso:

1
<CartContextProvider>
2
  <Header />
3
  <Shop />
4
</CartContextProvider>
5

6
// Product.jsx
7
function Product({ id }) {
8
  const cartCtx = useContext(CartContext);
9
  return <button onClick={() => cartCtx.addItemToCart(id)}>Add to Cart</button>;
10
}

Note Importanti

Posizionamento del reducer: Deve essere definito fuori dal componente perché è una funzione pura che non ha bisogno di accesso a props o valori del componente, ed evita ricreazioni ad ogni render.

1
// ✅ CORRETTO: fuori dal componente
2
function reducer(state, action) { /* ... */ }
3
function Component() {
4
  const [state, dispatch] = useReducer(reducer, initialState);
5
}
6

7
// ❌ SBAGLIATO: dentro il componente
8
function Component() {
9
  function reducer(state, action) { /* ... */ }
10
  const [state, dispatch] = useReducer(reducer, initialState);
11
}

Initializer function (terzo parametro): Utile quando lo state iniziale richiede calcoli costosi. Passa la funzione come terzo argomento:

1
function createInitialState(username) {
2
  // Calcoli costosi
3
  return { todos: /* ... */ };
4
}
5

6
// ❌ Chiamata ad ogni render
7
const [state, dispatch] = useReducer(reducer, createInitialState(username));
8

9
// ✅ Chiamata solo una volta
10
const [state, dispatch] = useReducer(reducer, username, createInitialState);

Problemi comuni:

• State non si aggiorna: Assicurati di restituire un nuovo oggetto, non modificare lo state esistente
• State diventa undefined: Usa ...state per copiare tutte le proprietà esistenti
• “Too many re-renders”: Non dispatchare durante il render, solo in event handlers
• Reducer eseguito due volte: Normale in Strict Mode (solo sviluppo), non causa problemi se il reducer è puro

Considerazioni sulle Performance

Quando si usa la Context API, qualsiasi cambiamento nel valore del context causa il re-render di tutti i componenti che consumano quel context, anche se utilizzano solo una parte del valore.

1
// Context per dati che cambiano spesso
2
const CartContext = createContext();
3
// Context per dati che cambiano raramente
4
const UserContext = createContext();
5

6
function App() {
7
  return (
8
    <UserContext.Provider value={userData}>
9
      <CartContext.Provider value={cartData}>
10
        <Header />
11
        <Shop />
12
      </CartContext.Provider>
13
    </UserContext.Provider>
14
  );
15
}

Una convenzione comune è organizzare i context in una cartella store o contexts, con ogni file che contiene la definizione del context, il componente Provider e eventuali reducer.

Riepilogo

Context API: Elimina il prop drilling creando un context con createContext, fornendolo con un Provider, e accedendovi con useContext.

useReducer: Gestisce state complesso con il pattern reducer:

• Sintassi: const [state, dispatch] = useReducer(reducer, initialState)
• Reducer: Funzione pura (state, action) => newState definita fuori dal componente
• Dispatch: dispatch({ type: 'ACTION_TYPE', ...dati }) per aggiornare lo state
• Regole: Reducer puro, restituisce sempre nuovo oggetto, usa ...state per copiare proprietà

La combinazione Context API + useReducer è un pattern comune per gestire state globale complesso senza prop drilling.