Advanced React Patterns

Once you're comfortable with React fundamentals, advanced patterns help you build scalable, maintainable applications. This guide covers custom hooks, compound components, performance optimization, Context pitfalls, and modern features like Suspense and Server Components.

Custom Hooks: Extracting Reusable Logic

What Makes a Custom Hook

A custom hook is a function that starts with use and calls other hooks. It lets you extract stateful logic from components so it can be shared. Custom hooks share state between components that use them—each call gets its own state, not a shared singleton.

When and How to Extract

Extract when you have logic used in multiple components (e.g., form input handling, data fetching, subscription to external stores). Keep hooks focused: one concern per hook. Compose smaller hooks into larger ones. Return an object or tuple depending on what's clearest for the consumer.

function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });
  useEffect(() => {
    const handler = () => setSize({ width: window.innerWidth, height: window.innerHeight });
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return size;
}

Compound Components Pattern

Flexible, Composable APIs

Compound components let you build flexible UIs where the parent and children work together through context. Think <Select>, <Select.Option>, <Select.Label>—the parent holds state; children customize appearance and behavior. Users get full control over layout and styling.

Implementation with Context