React: come funziona useContext (con esempi)

In React, l’hook useContext consente di condividere dati tra componenti, anche se non sono direttamente collegati. Questo è un modo più semplice e flessibile di condividere dati rispetto all’approccio props drilling.

Introduzione

L’hook useContext è uno strumento potente che può essere utilizzato per condividere dati tra componenti in modo semplice, efficiente e manutenibile.

Come funziona

L’hook useContext accetta due parametri:

• il contesto, che è un oggetto che rappresenta i dati che si desidera condividere;
• un selector, che è una funzione che viene utilizzata per ottenere il valore del contesto.

Il contesto viene creato utilizzando la funzione createContext().

const ThemeContext = createContext(null);

Il selector è una funzione che viene utilizzata per ottenere il valore del contesto. Il selector può essere una semplice funzione che restituisce il valore del contesto, oppure può essere una funzione che elabora il valore del contesto.

Per utilizzare l’hook useContext, è necessario importarlo dal package di React.js.

import React, { useContext } from 'react';

Quindi, è necessario utilizzare l’hook useContext all’interno dei componenti che necessitano di accedere ai dati del contesto.

const App = () => {
  const theme = useContext(ThemeContext);

  return (
    <div>
      <h1>Il tema corrente è {theme}</h1>
    </div>
  );
};

Esempio

Ecco un esempio di utilizzo del hook useContext per condividere un tema tra componenti.

import React, { createContext, useState, useContext } from "react";

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const App = () => {
  return (
    <ThemeProvider>
      <Content />
    </ThemeProvider>
  );
};

const Content = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div>
      <h1>Il tema corrente è {theme}</h1>
      <Button theme={theme} onClick={toggleTheme}>
        Modifica tema
      </Button>
    </div>
  );
};

const Button = ({ theme, onClick }) => {
  return (
    <button
      onClick={onClick}
      style={{ backgroundColor: theme === "dark" ? "#000" : "#fff" }}
    >
      {theme}
    </button>
  );
};

export default App;

In questo esempio, il contesto è rappresentato dall’oggetto ThemeContext. Il contesto viene creato utilizzando la funzione createContext().

Il componente ThemeProvider viene utilizzato per fornire il contesto ai componenti figli. Il componente ThemeProvider accetta un children come parametro, che è un componente che verrà reso all’interno del contesto.

const ThemeContext = createContext();

createContext è usato per inizializzare un nuovo React Context. Questo contesto può essere poi utilizzato per passare dei dati a vari componenti React senza la necessità di utilizzare props.

const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState('light');

    // resto del codice
};

Definiamo un componente di Provider per il nostro contesto. Questo provider userà il React Hook useState per creare uno stato che tiene traccia del tema corrente. Il provider sarà poi utilizzato per rendere disponibile questo stato a tutti i componenti che avranno bisogno di accedere al tema.

const App = () => {
    return (
        <ThemeProvider>
            <Content />
        </ThemeProvider>
    );
};

Avvolgiamo tutto il nostro contenuto dell’applicazione dentro al ThemeProvider. Questo ci permette di accedere allo stato del tema in tutti i componenti figli.

const Content = () => {
    const { theme, toggleTheme } = useContext(ThemeContext);

    // resto del codice
}

Utilizziamo il React Hook useContext per accedere allo stato del tema e alla funzione per cambiarlo.

const Button = ({ theme, onClick }) => {
    // resto del codice
};

Questo è un semplice componente Button che riceve il tema corrente e una funzione onClick come prop. Il colore di sfondo del pulsante cambia a seconda del tema. Nota: Se pensiamo di utilizzare il tema in molti luoghi diversi nel nostro codice, può essere utile rendere disponibile il contesto del tema tramite un Hook personalizzato. Questo può semplificare l’accesso al contesto del tema.

Vantaggi

L’utilizzo del hook useContext offre diversi vantaggi rispetto all’approccio props drilling.

• È più semplice e flessibile. Non è necessario passare i dati da un componente all’altro, ma è sufficiente utilizzare l’hook useContext() per ottenere il valore del contesto.
• È più efficiente. L’hook useContext() viene eseguito solo una volta, quando il componente viene montato.
• È più mantenibile. Il codice è più facile da capire e da mantenere, in quanto non è necessario tenere traccia della catena di props.

Conclusione

L’hook useContext è uno strumento potente che può essere utilizzato per condividere dati tra componenti in modo semplice, efficiente e manutenibile.