Advanced React Patterns

As your React applications grow, you need more sophisticated tools for state management and code reuse. This lesson covers useContext, useReducer, compound components, render props, higher-order components, and performance optimisation with React.memo, useMemo, and useCallback.

---

useContext — Avoiding Prop Drilling

Prop drilling is passing props through many intermediate components that don't use them:

App → Layout → Sidebar → UserMenu → Avatar
              (passes user through every level)

useContext lets you share data across the tree without passing props manually.

Creating and Using Context

import { createContext, useContext, useState, ReactNode } from "react";

// 1. Create the context
interface ThemeContextType {
  theme: "light" | "dark";
  toggle: () => void;
}

const ThemeContext = createContext<ThemeContextType | null>(null);

// 2. Create a provider component
function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<"light" | "dark">("light");

  const toggle = () => setTheme((t) => (t === "light" ? "dark" : "light"));

  return (
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
}