~//tutorials/react/react-patterns/edit

~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/react/19react-patterns

# React Patterns

Design patterns help build flexible, reusable component APIs. Choose the pattern based on what you need to share.

## Compound Components

Components that work together and share implicit state.

```jsx
<Tabs>
  <Tabs.List>
    <Tabs.Tab>One</Tabs.Tab>
    <Tabs.Tab>Two</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel>Content 1</Tabs.Panel>
  <Tabs.Panel>Content 2</Tabs.Panel>
</Tabs>
```

Internally, `Tabs` manages which tab is active and passes that state down via context.

```jsx
const TabsContext = createContext();

function Tabs({ children }) {
  const [active, setActive] = useState(0);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      {children}
    </TabsContext.Provider>
  );
}
```

## Render Props

A component receives a function as a prop and calls it with internal state.

```jsx
function MouseTracker({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)}
    </div>
  );
}

// Usage
<MouseTracker render={({ x, y }) => <p>Mouse at {x}, {y}</p>} />
```

## Higher-Order Components (HOC)

A function that takes a component and returns an enhanced version.

```jsx
function withAuth(Component) {
  return function Protected(props) {
    const { user } = useAuth();
    if (!user) return <Redirect to="/login" />;
    return <Component {...props} user={user} />;
  };
}

const ProtectedDashboard = withAuth(Dashboard);
```

## When to Use Each

- **Compound components** — when building complex UI with shared state (tabs, accordions, menus)
- **Render props** — when you need to share logic without wrapping components
- **HOCs** — for cross-cutting concerns like auth, logging, or data fetching

## Modern Alternatives

- **Hooks** have replaced most HOC and render prop use cases
- **Context + custom hooks** replace compound component boilerplate
- Use hooks first; reach for patterns only when hooks aren't enough

## Best Practices

- Favor hooks and context over HOCs and render props
- Use compound components for complex, related UI elements
- Keep HOCs focused on a single concern
- Name HOCs with the `with` prefix for clarity
- Avoid prop collisions when wrapping with HOCs

## Common Mistakes

- Over-engineering simple components with unnecessary patterns
- Creating deep HOC chains that are hard to debug
- Forwards refs correctly when wrapping with HOCs
- Not setting display names on HOCs (makes DevTools confusing)
- Using render props when a simple hook would work

No changes yet

cancel