Context in React è una funzionalità potente che consente la condivisione dei dati tra componenti senza la necessità di passare esplicitamente le prop a ogni livello dell'albero dei componenti. Utilizzando Context, è possibile propagare i dati lungo la gerarchia dei componenti, rendendoli facilmente accessibili a qualsiasi componente, indipendentemente dalla sua posizione nell'albero.

Nota

Per iniziare, analizziamo la sintassi. Verrà fornita una guida dettagliata, assicurando la comprensione di ogni concetto. L'applicazione del context richiede un'implementazione specifica del codice a vari livelli dei componenti. Una volta esaminata la sintassi, verrà presentato un esempio pratico.

Sintassi:

1° passaggio: Creazione di un nuovo Context utilizzando la funzione createContext() dalla libreria React e assegnazione a una variabile. Questa operazione deve essere eseguita a livello principale dell'applicazione. Solitamente, viene effettuata in un file separato (ad esempio, context.js). Questo file sarà responsabile dell'oggetto Context.

context.js

import { createContext } from "react";

// Create a new React context using the `createContext` function.
const Context = createContext();

// Export the created context so that it can be used in other parts of the application.
export default Context;

2° passaggio: Nel file App, si avvolgono tutti i componenti che necessitano di accedere ai dati condivisi con il componente Provider creato dal Context. Il componente Provider consente di definire il valore del contesto e renderlo disponibile a tutti i componenti figli che consumano quel contesto.

App.jsx

import React from "react";

// Import the `Context` object from `../context`.
import Context from "../context";

// Import child components that need access to the shared data.
import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  return (
    // Wrap the child components with `Context.Provider`.
    <Context.Provider>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

3° passaggio: Nel file App, è necessario anche fornire i dati del contesto. Questo si ottiene utilizzando la prop value per il componente Context.Provider. Tutti i dati richiesti vengono assegnati alla prop value.

App.jsx

import React from "react";

import Context from "../context";

import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  // Define any data that you want to share across child components.
  const sharedData = "Some shared data";

  return (
    // Provide the shared data as a value to `Context.Provider`.
    <Context.Provider value={sharedData}>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

4° passaggio: Nei componenti figli (ChildCompOne o ChildCompTwo), è possibile accedere ai dati condivisi utilizzando l'hook useContext. Per utilizzare l'hook useContext, è necessario passare il Context creato dal file context.js come argomento.

ChildCompOne.jsx

import React, { useContext } from "react";

// Import the `Context` object from "../context"
import Context from "../context";

const ChildComponentOne = () => {
  // Use the `useContext` hook to access data from the `Context`
  const data = useContext(Context);

  // You can now use the shared data in this component

  return <div>{data} in the first component</div>;
};

export default ChildComponentOne;

Codice completo dell'app:

Nota

Prenditi un momento per esaminare ogni passaggio, aprendo ciascun file e cartella, per assicurarti di comprendere chiaramente il processo. Nel prossimo capitolo verrà presentato un esempio che combina Context e hook. Questo ti permetterà di vedere come questi concetti funzionano insieme nella pratica.