Come utilizzare l'API Context in Reactjs?

React Context API è un modo per abilitare la condivisione di valori come prop da un componente padre to un componente figlio senza dover passare attraverso ogni componente tra il padre e il figlio. Viene utilizzato quando i dati devono essere accessibili da molti componenti in diversi livelli di nidificazione.

Ecco come è possibile utilizzare l’API React Context:

1. Creare il Context:

```
import React from ‘react’;
const MyContext = React.createContext(defaultValue);
```
Nell’esempio `defaultValue` è il valore iniziale per il Context.

1. Fornire i Dati al Context:

Dopo aver creato il Context si può usare il componente Provider. Tutti i componenti figli di Provider sono in grado di consumare i dati del Context senza importare quanto complicata sia la struttura dell’albero dei componenti.

```

```

1. Consumare i Dati del Context:

Ci sono due modi per consumare i dati dal Context: `Context.Consumer` e `useContext(MyContext)`.

- Usando `Context.Consumer`:

```
{(value) => /* render something based on the context value */}

```

- Usando l’hook `useContext(MyContext)`:

```
const value = React.useContext(MyContext);
```

Nell’esempio, `value` contiene il valore del Context.

Ricorda che per utilizzare l’hook `useContext()` devi utilizzare React 16.8.0 o versioni successive. Questo è il modo più semplice per consumare un Context in un componente function.