Component Patterns and Composition

Presentational vs Logic

Keep UI components focused on rendering; extract logic into custom hooks instead of container components.

Compound Components

Related components share state through their parent and compose into a rich widget like an accordion or tabs.

Custom Hooks

function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  return { count, inc: () => setCount(c => c + 1) };
}

Key Points

• Compose small focused components.
• Hooks beat HOCs for reuse.
• Follow the rules of hooks.