# React: useContext con useState

> Come combinare useContext e useState in React per condividere stato e funzione di aggiornamento tra componenti, con esempio live.

- Autore / Author: Diego Betto (https://diegobetto.com/about/)
- Pubblicato / Published: 2022-06-01
- URL: https://diegobetto.com/react-usecontext-usestate/
- Tag: react, hook, useContext, useState

Nella guida a [useContext](https://diegobetto.com/react-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:

```jsx
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:

```jsx
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:

<iframe src="https://codesandbox.io/embed/usecontext-with-usestate-example-c8u1rd?fontsize=14&#038;hidenavigation=1&#038;theme=dark"
style="width:100%; height: 650px; border:0; border-radius: 4px; overflow:hidden;"
title="useContext with useState example"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

Se il tuo stato inizia a diventare complesso, con molte azioni diverse, vale la pena valutare anche [useReducer](https://diegobetto.com/react-usereducer/) al posto di `useState`.