React Context API Explained: Avoid Prop Drilling and Share State Globally

// THE PROBLEM: currentUser drills through three components that don't use it.
// Only UserAvatar actually needed it — but Navbar and Header pay the coupling tax.

function App() {
  const currentUser = { name: 'Maya', role: 'admin', avatarUrl: '/maya.png' };

  // App passes currentUser to Navbar even though Navbar never reads it.
  // Navbar is a relay runner carrying a baton it will never touch.
  return <Navbar currentUser={currentUser} />;
}

function Navbar({ currentUser }) {
  // Navbar has to know about currentUser purely to pass it down.
  // If the currentUser shape changes, Navbar's types change too — even though
  // Navbar doesn't use the data. This is the coupling problem.
  return (
    <nav>
      <Logo />
      <Header currentUser={currentUser} />
    </nav>
  );
}

function Header({ currentUser }) {
  // Same story. Header is now entangled with auth data it does not render.
  // Add a new prop requirement from UserAvatar? Thread it through here too.
  return (
    <header>
      <h1>Dashboard</h1>
      <UserAvatar currentUser={currentUser} />
    </header>
  );
}

function UserAvatar({ currentUser }) {
  // This is the ONLY component that actually needed currentUser.
  // Three components above it pay the coupling price for this one consumer.
  return (
    <div className="avatar">
      <img src={currentUser.avatarUrl} alt={currentUser.name} />
      <span>{currentUser.name}</span>
    </div>
  );
}

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

// Step 1: Create the context with null as the default.
// null is intentional — it lets our custom hook detect when a component
// is used outside the Provider and throw a helpful error immediately.
// An empty object {} would be truthy and the guard would never fire.
const AuthContext = createContext(null);

// Step 2: The Provider component owns all auth state and logic.
// Every consumer gets what it needs from here — no duplication.
export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  // Async login — in production, replace the mock with your real auth service.
  // The Provider is the correct place for this logic, not individual components.
  const login = useCallback(async (email, password) => {
    setIsLoading(true);
    try {
      // const user = await authService.login(email, password);
      const mockUser = { id: '42', name: 'Maya Patel', email, role: 'admin' };
      setCurrentUser(mockUser);
    } finally {
      // finally ensures isLoading resets even if login throws
      setIsLoading(false);
    }
  }, []); // useCallback — stable reference, won't cause consumer re-renders

  const logout = useCallback(() => {
    setCurrentUser(null);
  }, []);

  // Derived state: compute once here, never in consumers.
  // If isAdmin logic changes, you update exactly one file.
  const isAdmin = currentUser?.role === 'admin';
  const isAuthenticated = currentUser !== null;

  // useMemo stabilises the value object reference.
  // Without this, a new object is created on every render, re-rendering all consumers.
  const contextValue = useMemo(() => ({
    currentUser,
    isAuthenticated,
    isAdmin,
    isLoading,
    login,
    logout,
  }), [currentUser, isAuthenticated, isAdmin, isLoading, login, logout]);

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

// Step 3: The custom hook. This is the ONLY API surface components should use.
// Do not export AuthContext. Do not call useContext(AuthContext) in components.
export function useAuth() {
  const context = useContext(AuthContext);

  if (context === null) {
    // Throws immediately in development when a component is outside AuthProvider.
    // The message is specific enough to find the problem in 30 seconds.
    throw new Error(
      'useAuth() was called outside of <AuthProvider>. ' +
      'Wrap the component (or its route) in AuthProvider to fix this.'
    );
  }

  return context;
}

// Wiring it up at the app root:
// ReactDOM.createRoot(document.getElementById('root')).render(
//   <AuthProvider>
//     <App />
//   </AuthProvider>
// );

// Consuming it five levels deep with no prop drilling:
function UserAvatar() {
  const { currentUser, logout, isAdmin } = useAuth();

  if (!currentUser) return <span className="text-sm">Guest</span>;

  return (
    <div className="flex items-center gap-2">
      <img
        src={`/avatars/${currentUser.id}.png`}
        alt={currentUser.name}
        className="w-8 h-8 rounded-full"
      />
      <span className="text-sm font-medium">{currentUser.name}</span>
      {isAdmin && (
        <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-800 rounded">
          Admin
        </span>
      )}
      <button
        onClick={logout}
        className="text-sm text-red-600 hover:underline"
      >
        Sign Out
      </button>
    </div>
  );
}

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

// Split contexts: separate value from actions.
// This is the pattern that prevents the toggle button from triggering
// re-renders in components that only read the current theme.
const ThemeValueContext   = createContext(null);
const ThemeActionsContext = createContext(null);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState(() => {
    // Lazy initialiser reads localStorage once at mount, not on every render.
    // This pattern is also how you persist theme across page reloads.
    return localStorage.getItem('theme') ?? 'light';
  });

  // useCallback ensures toggleTheme has a stable reference.
  // Without this, a new function is created every render,
  // causing ThemeActionsContext consumers to re-render unnecessarily.
  const toggleTheme = useCallback(() => {
    setTheme(prev => {
      const next = prev === 'light' ? 'dark' : 'light';
      localStorage.setItem('theme', next); // persist the choice
      return next;
    });
  }, []); // empty deps: this function never needs to be recreated

  const setSystemTheme = useCallback(() => {
    const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light';
    setTheme(preferred);
    localStorage.setItem('theme', preferred);
  }, []);

  // useMemo for the value object: reference only changes when theme changes.
  // Components reading the theme re-render only when theme actually changes.
  const themeValue = useMemo(() => ({
    theme,
    isDark:  theme === 'dark',
    isLight: theme === 'light',
  }), [theme]);

  // Actions are stable due to useCallback, so this object is also stable.
  // Components that only call toggleTheme never re-render due to theme value changes.
  const themeActions = useMemo(() => ({
    toggleTheme,
    setSystemTheme,
  }), [toggleTheme, setSystemTheme]);

  return (
    <ThemeValueContext.Provider value={themeValue}>
      <ThemeActionsContext.Provider value={themeActions}>
        {children}
      </ThemeActionsContext.Provider>
    </ThemeValueContext.Provider>
  );
}

export function useTheme() {
  const context = useContext(ThemeValueContext);
  if (!context) throw new Error('useTheme() must be used inside <ThemeProvider>');
  return context;
}

export function useThemeActions() {
  const context = useContext(ThemeActionsContext);
  if (!context) throw new Error('useThemeActions() must be used inside <ThemeProvider>');
  return context;
}

// This component re-renders ONLY when the theme value changes.
function ThemedBackground({ children }) {
  const { theme, isDark } = useTheme();

  return (
    <div
      className={`min-h-screen transition-colors duration-200 ${
        isDark ? 'bg-gray-900 text-white' : 'bg-white text-gray-900'
      }`}
      data-theme={theme}
    >
      {children}
    </div>
  );
}

// This component NEVER re-renders due to theme value changes.
// It only subscribes to the actions context, whose references are stable.
function ThemeToggleButton() {
  const { toggleTheme } = useThemeActions();

  return (
    <button
      onClick={toggleTheme}
      aria-label="Toggle light and dark theme"
      className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
    >
      Toggle Theme
    </button>
  );
}

-- Production schema for user profile data that hydrates the React AuthContext.
-- Field names here are intentionally aligned with the Context shape to
-- minimise transformation logic in the API layer.

CREATE TABLE IF NOT EXISTS io.thecodeforge.user_profiles (
    user_id          UUID          PRIMARY KEY DEFAULT gen_random_uuid(),
    username         VARCHAR(50)   UNIQUE NOT NULL,
    email            VARCHAR(255)  UNIQUE NOT NULL,
    role             VARCHAR(20)   NOT NULL DEFAULT 'member'
                                   CHECK (role IN ('admin', 'member', 'viewer', 'guest')),
    theme_preference VARCHAR(10)   NOT NULL DEFAULT 'light'
                                   CHECK (theme_preference IN ('light', 'dark', 'system')),
    last_login_at    TIMESTAMPTZ,
    created_at       TIMESTAMPTZ   NOT NULL DEFAULT NOW()
);

CREATE INDEX idx_user_profiles_email ON io.thecodeforge.user_profiles (email);

-- Context hydration query: single round-trip, returns everything AuthProvider needs.
-- The column aliases match the Context value shape exactly so the API layer
-- can return the row directly without transformation.
SELECT
    user_id         AS id,
    username        AS name,
    email,
    role,                         -- matches currentUser.role in AuthContext
    theme_preference AS theme,    -- matches ThemeContext initial value
    last_login_at
FROM io.thecodeforge.user_profiles
WHERE user_id = $1              -- parameterised: never interpolate user input
LIMIT 1;

-- Update last_login_at on successful authentication
UPDATE io.thecodeforge.user_profiles
SET last_login_at = NOW()
WHERE user_id = $1;

# Multi-stage Dockerfile for io.thecodeforge React applications
# Stage 1 compiles the app; Stage 2 serves it. Only compiled assets ship to production.

# Pin the exact version for reproducible builds.
# 'node:alpine' without a version can change under you between CI runs.
FROM node:20-alpine AS build-stage

WORKDIR /app

# Copy dependency manifests first — Docker layer cache means npm install
# only re-runs when package.json or package-lock.json changes, not on every code change.
COPY package.json package-lock.json ./
RUN npm ci --ignore-scripts  # ci is faster and stricter than npm install

# Copy source after installing deps so code changes don't invalidate the npm layer
COPY . .
RUN npm run build  # outputs to /app/dist (Vite) or /app/build (CRA)

# Stage 2: serve compiled assets with Nginx.
# The final image has no Node.js, no source code, no node_modules — just assets.
FROM nginx:1.27-alpine

# Copy compiled assets from the build stage
COPY --from=build-stage /app/dist /usr/share/nginx/html

# Custom Nginx config for client-side routing:
# All unknown paths return index.html so React Router handles them.
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Verify the container starts healthy before routing traffic to it
HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
  CMD wget -qO- http://localhost/health || exit 1

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]