Qu'est-ce que le Context API ?

Le Context API dans React est une méthode pratique pour gérer l'état d'informations partagées au sein d'une application. Son principal avantage est qu'il permet à un composant parent de transmettre des informations à n'importe quel autre composant situé à un niveau inférieur de la hiérarchie, sans avoir à utiliser les propriétés (props) pour ce faire. Ce mécanisme peut être intégré avec le hook useState() pour ajuster l'état des données. Des cas d'utilisation fréquents incluent la transmission de thèmes (par exemple, couleurs, espacements, tailles de police) ou des informations sur un utilisateur authentifié.

Les avantages du Context

Traditionnellement, les données sont passées d'un composant à un autre à travers les props. Cela peut devenir complexe, particulièrement lorsque les informations doivent être transférées sur plusieurs niveaux de la hiérarchie des composants, ce qui est souvent appelé "prop drilling". Dans les applications de grande envergure, cette méthode peut rendre le code difficile à maintenir. Grâce au Context API, cette complexité est considérablement réduite.

Comment implémenter le Context API ?

Pour utiliser le Context API, il est essentiel de débuter par la création du contexte avec la fonction createContext(). Ensuite, le hook useContext() peut être utilisé pour accéder au contexte à partir des composants adéquats.

Mise en œuvre de l'API Context

Voici un exemple d'implémentation de l'API Context :

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

// Création du Contexte
const ThemeContext = createContext();

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

    return (
        
            {children}
        
    );
};

const ThemedComponent = () => {
    const { theme, setTheme } = useContext(ThemeContext);

    return (
        

            
Le thème actuel est {theme}
             setTheme(theme === 'light' ? 'dark' : 'light')}>Changer le thème
        
    );
};

export const App = () => (
    
        
    
);