Context & State

// App — the only component that actually HAS the user
function App() {
  const [user, setUser] = useState({ name: 'Alice', role: 'admin' });
  return <Layout user={user} />;   // Layout doesn't need this…
}

// Layout — doesn't use user, but must accept + forward it
function Layout({ user }) {
  return <Page user={user} />;      // Page doesn't need it either…
}

// Page — same story
function Page({ user }) {
  return <Section user={user} />;
}

// Section — same story again
function Section({ user }) {
  return <UserAvatar user={user} />;
}

// UserAvatar — the ONLY component that actually needs user
function UserAvatar({ user }) {
  return <img src={user.avatar} alt={user.name} />;
}

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

// 1. Create the context (outside any component)
export const UserContext = createContext(null);

// 2. Create a Provider component (keeps concerns tidy)
export function UserProvider({ children }) {
  const [user, setUser] = useState({ name: 'Alice', role: 'admin' });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

// 3. Custom hook — cleaner API, avoids importing context everywhere
export function useUser() {
  const ctx = useContext(UserContext);
  if (!ctx) throw new Error('useUser must be inside <UserProvider>');
  return ctx;
}

import { UserProvider } from './UserContext';

function App() {
  return (
    {/* Wrap the part of the tree that needs the user */}
    <UserProvider>
      <Layout />   {/* No user prop needed here anymore */}
    </UserProvider>
  );
}

// Layout, Page, Section — completely clean, no user prop
function Layout() { return <Page />; }
function Page()   { return <Section />; }
function Section(){ return <UserAvatar />; }

import { useUser } from './UserContext';

function UserAvatar() {
  const { user } = useUser();   // reads directly from context
  return <img src={user.avatar} alt={user.name} />;
}

// Any other deeply-nested component can do the same — zero prop drilling

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

const ThemeContext = createContext(null);
const UserContext  = createContext(null);

export function AppProviders({ children }) {
  const [theme, setTheme] = useState('dark');
  const [user, setUser]   = useState({ name: 'Alice', role: 'admin' });

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

export const useTheme = () => useContext(ThemeContext);
export const useUser  = () => useContext(UserContext);

// In any component, anywhere in the tree:
function Settings() {
  const { theme, setTheme } = useTheme();
  return <button onClick={() => setTheme(t => t === 'dark' ? 'light' : 'dark')}>Toggle</button>;
}

import { useReducer } from 'react';

// Initial state — a plain object
const initialState = { count: 0, step: 1 };

// Reducer — pure function, no side effects
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + state.step };
    case 'DECREMENT':
      return { ...state, count: state.count - state.step };
    case 'RESET':
      return initialState;
    case 'SET_STEP':
      return { ...state, step: action.payload };
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count} (step: {state.step})</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>−</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
      <button onClick={() => dispatch({ type: 'SET_STEP', payload: 5 })}>Set Step 5</button>
    </div>
  );
}

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

const CartContext = createContext(null);

function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_TO_CART': {
      const existing = state.items.find(i => i.id === action.item.id);
      if (existing) {
        return { ...state, items: state.items.map(i =>
          i.id === action.item.id ? { ...i, qty: i.qty + 1 } : i
        )};
      }
      return { ...state, items: [...state.items, { ...action.item, qty: 1 }] };
    }
    case 'REMOVE_FROM_CART':
      return { ...state, items: state.items.filter(i => i.id !== action.id) };
    case 'CLEAR_CART':
      return { items: [] };
    default:
      return state;
  }
}

export function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, { items: [] });
  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

// Custom hook — any component uses this
export function useCart() {
  return useContext(CartContext);
}

// NavBar — reads cart count (no props from parent)
function NavBar() {
  const { state } = useCart();
  return <span>🛒 {state.items.length}</span>;
}

// ProductCard — dispatches add action (no prop callbacks needed)
function ProductCard({ product }) {
  const { dispatch } = useCart();
  return (
    <button onClick={() => dispatch({ type: 'ADD_TO_CART', item: product })}>
      Add to cart
    </button>
  );
}

// ✗ Bad — new object reference on every render → all consumers rerender
function BadProvider({ children }) {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>   {/* new {} every render! */}
      {children}
    </UserContext.Provider>
  );
}

// ✓ Fix — useMemo so the object reference stays stable
import { useMemo } from 'react';
function GoodProvider({ children }) {
  const [user, setUser] = useState(null);
  const value = useMemo(() => ({ user, setUser }), [user]);
  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  );
}

// ✗ Bad — createContext(null) with no null check
const ThemeContext = createContext(null);

function Button() {
  const { theme } = useContext(ThemeContext); // crashes if no Provider above it
}

// ✓ Good — custom hook with a guard
function useTheme() {
  const ctx = useContext(ThemeContext);
  if (ctx === null) {
    throw new Error('useTheme must be used inside <ThemeProvider>');
  }
  return ctx;
}