Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

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

// ── Auth context ───────────────────────────────────────────────────────────
const AuthContext = createContext(null);

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

const value = useMemo(() => ({
        user,
        login:  (userData) => setUser(userData),
        logout: ()         => setUser(null),
    }), [user]);

return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

// ── Custom hook with guard ─────────────────────────────────────────────────
export function useAuth() {
    const ctx = useContext(AuthContext);
    if (ctx === null) {
        throw new Error('useAuth must be used inside <AuthProvider>');
    }
    return ctx;
}

// ── Consumer ───────────────────────────────────────────────────────────────
function Navbar() {
    const { user, logout } = useAuth();
    return (
        <nav>
            {user ? (
                <>
                    <span>Hello, {user.name}</span>
                    <button onClick={logout}>Log out</button>
                </>
            ) : (
                <span>Not logged in</span>
            )}
        </nav>
    );
}