Cos'è useContext in React?

useContext è un hook in React che permette ai componenti funzionali di iscriversi alle modifiche del contesto. Fornisce un modo per passare i dati attraverso l'albero dei componenti senza dover passare esplicitamente props a ogni livello.

Principio di funzionamento:

1. Creazione del contesto: Si utilizza React.createContext() per creare un oggetto di contesto. Questo oggetto contiene un Provider e un Consumer (o si usa useContext nei componenti funzionali).
2. Fornire il valore: Il componente Provider del contesto avvolge l'albero dei componenti che devono accedere al valore. Attraverso la prop value si passa il valore che sarà disponibile per tutti i componenti iscritti.
3. Ottenere il valore: useContext(MyContext) viene chiamato all'interno di un componente funzionale, dove MyContext è il contesto creato in precedenza. Il hook restituisce il valore corrente del contesto. Quando questo valore cambia, il componente che usa useContext si ri-renderizza automaticamente.

Vantaggi:

• Facilità di passaggio dei dati: Elimina la necessità di "prop drilling" attraverso più componenti intermedi.
• Stato globale: Utile per gestire lo stato globale dell'applicazione (ad esempio, tema, autenticazione, localizzazione).
• Prestazioni: React ottimizza il rendering dei componenti che usano useContext, ri-renderizzando solo quelli iscritti ai cambiamenti di quel contesto.

Svantaggi:

• Difficoltà di debug: Può essere più difficile tracciare da dove proviene il valore del contesto rispetto ai props.
• Prestazioni con aggiornamenti frequenti: Se il valore del contesto viene aggiornato molto spesso, può portare a frequenti ri-render di tutti i componenti iscritti.

Esempio:

import React, { createContext, useContext } from 'react';

// 1. Creazione del contesto
const ThemeContext = createContext('light');

// Componente provider
function ThemeProvider({ children }) {
  const theme = 'dark'; // Valore di esempio
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Componente che utilizza il contesto
function ThemedComponent() {
  // 3. Ottenere il valore del contesto
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Tema: {theme}</div>;
}

// Applicazione
function App() {
  return (
    <ThemeProvider> {/* 2. Fornire il valore */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;