React Component Patterns

Common React patterns for reusable components.

Higher-Order Component (HOC)

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

const ProtectedDashboard = withAuth(Dashboard);

Render Props

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

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!