Context API for State Management

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

// 1. Create the context (with an optional default value)
const ThemeContext = createContext('light');

// 2. Provide the context value from an ancestor component
function App() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 3. Consume the context value in any descendant
function Toolbar() {
  return <ThemedButton />;
}

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

// A more realistic pattern: a dedicated context + custom hook + provider
import { createContext, useContext, useState } from 'react';

const AuthContext = createContext(null);

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

  const login = (username) => setUser({ username });
  const logout = () => setUser(null);

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

// Custom hook simplifies consumption and adds a safety check
export function useAuth() {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

function Profile() {
  const { user, logout } = useAuth();
  return user ? (
    <button onClick={logout}>Log out {user.username}</button>
  ) : (
    <p>Not logged in</p>
  );
}