13 — useContext

🔍 Le problème du « prop drilling »

Quand une donnée doit traverser plusieurs niveaux de composants :

// ❌ Prop drilling — la prop "theme" traverse des composants intermédiaires
function App() {
    const [theme, setTheme] = useState('sombre');
    return <Layout theme={theme} />;
}

function Layout({ theme }) {
    return <Sidebar theme={theme} />;   // Layout n'utilise pas theme !
}

function Sidebar({ theme }) {
    return <Bouton theme={theme} />;     // Sidebar non plus !
}

function Bouton({ theme }) {
    return <button className={theme}>OK</button>; // Seul Bouton l'utilise
}

Avec Context, on peut « téléporter » la donnée directement là où elle est nécessaire.

📐 Les 3 étapes du Context

1. Créer le Context

const ThemeContext = React.createContext('clair'); // valeur par défaut

2. Fournir (Provider)

function App() {
    const [theme, setTheme] = useState('sombre');

    return (
        // Tous les descendants ont accès à theme
        <ThemeContext.Provider value={theme}>
            <Layout />
        </ThemeContext.Provider>
    );
}

3. Consommer (useContext)

const { useContext } = React;

function Bouton() {
    const theme = useContext(ThemeContext); // 🎯 Accès direct !
    return <button className={theme}>OK</button>;
}

// Plus besoin de passer la prop à travers Layout et Sidebar !

🔄 Context avec état et setter

On passe souvent la valeur et la fonction de mise à jour :

const ThemeContext = React.createContext();

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

    const toggleTheme = () => {
        setTheme(prev => prev === 'sombre' ? 'clair' : 'sombre');
    };

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

// Utilisation
function Bouton() {
    const { theme, toggleTheme } = useContext(ThemeContext);
    return <button onClick={toggleTheme}>Thème : {theme}</button>;
}

🧩 Quand utiliser Context ?

• Thème (clair/sombre)
• Langue (i18n)
• Utilisateur connecté (auth)
• Données partagées entre beaucoup de composants distants

📦 Multiples Contexts

// On peut imbriquer plusieurs Providers
<ThemeContext.Provider value={theme}>
    <AuthContext.Provider value={user}>
        <LangueContext.Provider value={langue}>
            <App />
        </LangueContext.Provider>
    </AuthContext.Provider>
</ThemeContext.Provider>

🚀 Démo interactive

▼ Thème + Langue via Context

📝 Résumé