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.

function getTheme() {
  return useContext(ThemeContext);
}

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.

const ThemeContext = createContext(null);

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

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

const getTheme = () => useContext(ThemeContext);

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

  return (
    <div>
      <h1>Il tema corrente è {theme}</h1>
      <ThemeProvider>
        <Button theme="dark">Modifica tema</Button>
      </ThemeProvider>
    </div>
  );
};

const Button = ({ theme }) => {
  return (
    <button 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.

Il componente getTheme viene utilizzato per ottenere il valore del contesto. Il componente getTheme utilizza l’hook useContext() per ottenere il valore del contesto.

Il componente App utilizza il componente ThemeProvider per fornire il contesto ai componenti figli. Il componente App utilizza anche l’hook useContext() per ottenere il valore del contesto.

Il componente Button utilizza il valore del contesto per impostare il colore di sfondo del pulsante.

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.