Qu'est-ce que useContext dans React?

useContext est un hook dans React qui permet aux composants fonctionnels de s'abonner aux changements de contexte. Il offre un moyen de transmettre des données à travers l'arbre de composants sans avoir à passer explicitement des props à chaque niveau.

Principe de fonctionnement :

1. Création du contexte : Utilisez React.createContext() pour créer un objet de contexte. Cet objet contient un Provider et un Consumer (ou utilisez useContext dans des composants fonctionnels).
2. Fournir une valeur : Le composant Provider du contexte enveloppe l'arbre de composants qui ont besoin d'accéder à la valeur. La valeur est passée via la prop value et sera accessible à tous les composants abonnés.
3. Obtenir la valeur : useContext(MyContext) est appelé à l'intérieur d'un composant fonctionnel, où MyContext est le contexte créé précédemment. Le hook retourne la valeur actuelle du contexte. Lorsque cette valeur change, le composant utilisant useContext se re-render automatiquement.

Avantages :

• Facilite la transmission de données : Élimine la nécessité de "prop drilling" à travers plusieurs composants intermédiaires.
• État global : Utile pour gérer l'état global de l'application (par exemple, thème, authentification, localisation).
• Performance : React optimise le rendu des composants utilisant useContext, ne re-rendant que ceux qui sont abonnés aux changements.

Inconvénients :

• Difficulté de débogage : Il peut être plus difficile de suivre d'où provient la valeur du contexte comparé aux props.
• Performance avec des mises à jour fréquentes : Si la valeur du contexte est mise à jour très souvent, cela peut entraîner des re-renders fréquents de tous les composants abonnés.

Exemple :

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

// 1. Création du contexte
const ThemeContext = createContext('light');

// Composant fournisseur
function ThemeProvider({ children }) {
  const theme = 'dark'; // Exemple de valeur
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Composant utilisant le contexte
function ThemedComponent() {
  // 3. Récupération de la valeur du contexte
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Thème : {theme}</div>;
}

// Application
function App() {
  return (
    <ThemeProvider> {/* 2. Fournir la valeur */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;