React Component Patterns

Common React patterns for reusable components.

Higher-Order Component (HOC)

```javascript function withAuth(Component) { return function AuthComponent(props) { const isLoggedIn = checkAuth(); if (!isLoggedIn) { return <Login />; } return <Component {...props} />; }; }

const ProtectedDashboard = withAuth(Dashboard); ```

Render Props

```javascript function Mouse({ render }) { const [position, setPosition] = useState({ x: 0, y: 0 });

return ( <div onMouseMove={e => setPosition({ x: e.clientX, y: e.clientY })}> {render(position)} </div> ); }

<Mouse render={({ x, y }) => ( <p>Mouse: {x}, {y}</p> )} /> ```

Compound Components

```javascript function Tabs({ children }) { const [active, setActive] = useState(0); return <div>{children}</div>; }

Tabs.Tab = function Tab({ children, index }) { return <button>{children}</button>; };

<Tabs> <Tabs.Tab index={0}>Tab 1</Tabs.Tab> <Tabs.Tab index={1}>Tab 2</Tabs.Tab> </Tabs> ```

Remember

- HOC for cross-cutting concerns - Render props for flexibility - Compound for related components - Custom hooks are often simpler

> Next: Learn prop types!