useContext

Code

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

// Create Context
const ThemeContext = createContext();
const UserContext = createContext(null);

// Provider component
function App() {
    const [theme, setTheme] = useState('light');
    const [user, setUser] = useState(null);

    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            <UserContext.Provider value={{ user, setUser }}>
                <Page />
            </UserContext.Provider>
        </ThemeContext.Provider>
    );
}

// Consume Context
function Page() {
    const { theme } = useContext(ThemeContext);
    const { user } = useContext(UserContext);

    return (
        <div className={theme}>
            {user ? <Welcome /> : <Login />}
        </div>
    );
}

// Theme toggle
function ThemeToggle() {
    const { theme, setTheme } = useContext(ThemeContext);
    return (
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
            Toggle {theme}
        </button>
    );
}

// Custom Context Hook
function useTheme() {
    const ctx = useContext(ThemeContext);
    if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
    return ctx;
}

// Context with default value
const LocaleContext = createContext('zh-CN');

Explanation

Context passes data across components, avoiding prop drilling; Provider provides values; useContext consumes values.

More React Snippets