L'hook di React useContextè un potente strumento per condividere lo stato tra i componenti senza dover passare i dati attraverso una lunga catena di oggetti di scena. Con useContext, puoi condividere facilmente lo stato nell'intero albero dei componenti, rendendolo uno strumento utile per la gestione dello stato globale.

In questo articolo, esploreremo le basi dell'hook useContexte vedremo come possiamo usarlo per gestire lo stato nelle nostre applicazioni React.

Cos'è useContext?

useContextè un hook integrato di React che ti consente di consumare dati da un contesto che è stato creato da un componente genitore. Un contesto è un oggetto che contiene alcuni dati di stato condivisi a cui può accedere qualsiasi componente discendente del componente che ha creato il contesto.

L' useContexthook prende un oggetto di contesto come suo argomento e restituisce il valore corrente di quel contesto. Ciò significa che qualsiasi aggiornamento al contesto attiverà automaticamente un nuovo rendering di tutti i componenti che lo utilizzano.

Come usare useContext?

Per utilizzare useContext, dobbiamo prima creare un oggetto di contesto. Possiamo farlo usando il createContextmetodo della Reactlibreria. Ecco un esempio:

import React from 'react';

const MyContext = React.createContext();

import React from 'react';

const MyContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <div>
        <h1>Count: {count}</h1>
        <Counter />
      </div>
    </MyContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = React.useContext(MyContext);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Il Appcomponente esegue il wrapping dei suoi componenti figlio nel MyContext.Providercomponente e passa il valore corrente dello stato condiviso come valueprop. In questo caso, il valore è un oggetto contenente lo countstato e la setCountfunzione.

Il Countercomponente utilizza l' MyContextoggetto utilizzando l' useContexthook ed estraendo lo countstato e la setCountfunzione dall'oggetto di contesto. Stiamo quindi utilizzando la incrementfunzione per aggiornare lo stato condiviso quando si fa clic sul pulsante.

Quando usare useContext?

useContextè molto utile per gestire lo stato globale a cui devono accedere più componenti in tutta l'applicazione. È una buona scelta per i casi in cui la perforazione dell'elica sarebbe ingombrante o in cui si desidera evitare il passaggio dello stato attraverso più strati di componenti.

useContextè anche una buona scelta per i casi in cui è necessario trasferire le funzioni attraverso l'albero dei componenti. Passando una funzione attraverso l'oggetto contesto, puoi evitare di doverla passare attraverso più strati di componenti.

Conclusione

L' useContexthook è un potente strumento per la gestione dello stato globale.

Spero che questo ti spieghi tutto.