My Favorite React Patterns

After years of building React applications, certain patterns keep showing up in the cleanest, most maintainable codebases. These are not tricks or hacks — they are structural approaches that make components easier to reason about, test, and extend.

1. Compound Components

Compound components let you express complex UI relationships through JSX composition, without prop-drilling or clunky configuration objects.

<Accordion>
  <Accordion.Item value="one">
    <Accordion.Trigger>What is this?</Accordion.Trigger>
    <Accordion.Content>
      A compound component pattern.
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

2. Container / Presentational Split

Separate the logic from the rendering. A container component handles data fetching, state, and side effects. A presentational component renders UI from props and nothing else.

3. Custom Hooks for Logic Reuse

Any time I find myself duplicating logic across two components, it goes into a custom hook. Hooks are the cleanest unit of abstraction React has.

function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = (value: T) => {
    setStoredValue(value);
    window.localStorage.setItem(key, JSON.stringify(value));
  };

  return [storedValue, setValue] as const;
}

Patterns to Use With Care

• Higher-Order Components (HOCs) — hooks usually do it better
• Context for all state — Context re-renders are broad
• Deeply nested compound components — keep trees shallow
• Over-abstracting early — wait for the pattern to emerge naturally

“Write the simplest thing that could possibly work. Reach for patterns only when the code tells you it needs them.”

— Abdullah Al Maksud