How to Use React Context for Global State

Context provides a way to pass data through the component tree without having to pass props at every level.

Step 1 — Create the Context

// context/AuthContext.jsx
import { createContext, useContext, useState } from 'react';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
    const [user, setUser] = useState(null);

    function login(userData) {
        setUser(userData);
    }

    function logout() {
        setUser(null);
    }

    return (
        <AuthContext.Provider value={{ user, login, logout }}>
            {children}
        </AuthContext.Provider>
    );
}

// Custom hook for clean consumption
export function useAuth() {
    const ctx = useContext(AuthContext);
    if (!ctx) throw new Error('useAuth must be used within AuthProvider');
    return ctx;
}

Step 2 — Wrap Your App

// main.jsx
import { AuthProvider } from './context/AuthContext';

createRoot(document.getElementById('root')).render(
    <AuthProvider>
        <App />
    </AuthProvider>
);

Step 3 — Consume in Any Component

// components/Navbar.jsx
import { useAuth } from '../context/AuthContext';

function Navbar() {
    const { user, logout } = useAuth();

    return (
        <nav>
            {user ? (
                <>
                    <span>Hello, {user.name}</span>
                    <button onClick={logout}>Log out</button>
                </>
            ) : (
                <a href="/login">Log in</a>
            )}
        </nav>
    );
}