React: useContext con useState

Nella guida a useContext abbiamo visto come condividere dati tra componenti senza props drilling. Un caso d’uso molto comune è combinare useContext con useState: non ci limitiamo a condividere un valore, ma anche la funzione per aggiornarlo, in modo che qualsiasi componente figlio possa leggere e modificare lo stato condiviso.

Il pattern

Lo stato vive in un componente Provider, insieme al suo setter, e viene passato al Context come valore:

const CounterContext = createContext();

const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  return (
    <CounterContext.Provider value={{ count, setCount }}>
      {children}
    </CounterContext.Provider>
  );
};

Qualsiasi componente annidato dentro CounterProvider può poi leggere count e chiamare setCount tramite useContext, senza doverli ricevere come prop:

const Counter = () => {
  const { count, setCount } = useContext(CounterContext);

  return (
    <button onClick={() => setCount(count + 1)}>
      Hai cliccato {count} volte
    </button>
  );
};

Esempio live

Ecco un esempio completo e interattivo su CodeSandbox:

Se il tuo stato inizia a diventare complesso, con molte azioni diverse, vale la pena valutare anche useReducer al posto di useState.