createContext

const SomeContext = createContext(defaultValue)

• Reference
  • createContext(defaultValue)
  • Provider di SomeContext
  • SomeContext.Consumer
• Usage
  • Creare un context
  • Importare ed esportare un context da un file
• Troubleshooting
  • Non trovo un modo per cambiare il valore del context

Reference

createContext(defaultValue)

Chiama createContext al di fuori di qualsiasi componente per creare un context.

import { createContext } from 'react';

const ThemeContext = createContext('light');

Vedi altri esempi sotto.

Parameters

• defaultValue: Il valore che vuoi che il context abbia quando non c’è un context provider corrispondente nell’albero sopra il componente che legge il context. Se non hai un valore predefinito significativo, specifica null. Il valore predefinito è pensato come fallback “d’ultima risorsa”. È statico e non cambia mai nel tempo.

Returns

createContext restituisce un oggetto context.

L’oggetto context in sé non contiene alcuna informazione. Rappresenta quale context altri componenti leggono o forniscono. In genere, userai SomeContext nei componenti sopra per specificare il valore del context, e chiamerai useContext(SomeContext) nei componenti sotto per leggerlo. L’oggetto context ha alcune proprietà:

• SomeContext ti permette di fornire il valore del context ai componenti.
• SomeContext.Consumer è un modo alternativo e raramente usato per leggere il valore del context.
• SomeContext.Provider è un modo legacy per fornire il valore del context prima di React 19.

Provider di SomeContext

Avvolgi i tuoi componenti in un context provider per specificare il valore di questo context per tutti i componenti al suo interno:

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext value={theme}>
      <Page />
    </ThemeContext>
  );
}

Props

• value: Il valore che vuoi passare a tutti i componenti che leggono questo context all’interno di questo provider, indipendentemente dalla profondità. Il valore del context può essere di qualsiasi tipo. Un componente che chiama useContext(SomeContext) all’interno del provider riceve il value del context provider corrispondente più interno sopra di esso.

SomeContext.Consumer

Prima che esistesse useContext, c’era un modo più vecchio per leggere il context:

function Button() {
  // 🟡 Modo legacy (sconsigliato)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

Anche se questo modo più vecchio funziona ancora, il codice scritto di recente dovrebbe leggere il context con useContext() invece:

function Button() {
  // ✅ Modo consigliato
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

Props

• children: Una funzione. React chiamerà la funzione che passi con il valore attuale del context determinato dallo stesso algoritmo usato da useContext(), e renderizzerà il risultato che restituisci da questa funzione. React rieseguirà anche questa funzione e aggiornerà l’UI ogni volta che il context dei componenti genitori cambia.

Usage

Creare un context

Il context consente ai componenti di passare informazioni in profondità senza passare esplicitamente le props.

Chiama createContext al di fuori di qualsiasi componente per creare uno o più context.

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

createContext restituisce un oggetto context. I componenti possono leggere il context passandolo a useContext():

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

function Profile() {
  const currentUser = useContext(AuthContext);
  // ...
}

Per impostazione predefinita, i valori che ricevono saranno i valori predefiniti che hai specificato quando hai creato i context. Tuttavia, da solo questo non è utile perché i valori predefiniti non cambiano mai.

Il context è utile perché puoi fornire altri valori dinamici dai tuoi componenti:

function App() {
  const [theme, setTheme] = useState('dark');
  const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });

  // ...

  return (
    <ThemeContext value={theme}>
      <AuthContext value={currentUser}>
        <Page />
      </AuthContext>
    </ThemeContext>
  );
}

Ora il componente Page e qualsiasi componente al suo interno, indipendentemente dalla profondità, “vedrà” i valori del context passati. Se i valori del context passati cambiano, React ri-renderizzerà anche i componenti che leggono il context.

Leggi di più sulla lettura e la fornitura del context e vedi esempi.

Importare ed esportare un context da un file

Spesso, componenti in file diversi avranno bisogno di accedere allo stesso context. Per questo è comune dichiarare i context in un file separato. Poi puoi usare l’istruzione export per mettere il context a disposizione di altri file:

// Contexts.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);

I componenti dichiarati in altri file possono poi usare l’istruzione import per leggere o fornire questo context:

// Button.js
import { ThemeContext } from './Contexts.js';

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

// App.js
import { ThemeContext, AuthContext } from './Contexts.js';

function App() {
  // ...
  return (
    <ThemeContext value={theme}>
      <AuthContext value={currentUser}>
        <Page />
      </AuthContext>
    </ThemeContext>
  );
}

Funziona in modo simile a importare ed esportare componenti.

Troubleshooting

Non trovo un modo per cambiare il valore del context

Codice come questo specifica il valore predefinito del context:

const ThemeContext = createContext('light');

Questo valore non cambia mai. React usa questo valore solo come fallback se non trova un provider corrispondente sopra.

Per far cambiare il context nel tempo, aggiungi lo state e avvolgi i componenti in un context provider.