React Patterns: Render Props and HOCs

50 min

Render props and Higher-Order Components (HOCs) are patterns for sharing code between React components.

Render props involve passing a function as a prop to a component, which the component then calls to render something.

HOCs are functions that take a component and return a new component with additional props or behavior.

While these patterns were common before hooks, custom hooks often provide a cleaner solution for sharing logic. However, understanding these patterns is still valuable for working with older codebases.

Render props provide flexibility by allowing the consumer to decide how to render the data, while HOCs wrap components to add functionality.

Both patterns enable code reuse and separation of concerns, though hooks have largely replaced them in modern React development.

Key Concepts

Render props pass functions as props that determine rendering.
HOCs are functions that enhance components with additional functionality.
These patterns enable code reuse and logic sharing.
Custom hooks often provide cleaner alternatives to these patterns.
Understanding these patterns helps with legacy codebases.

Learning Objectives

Master

Implementing render prop components
Creating higher-order components
Understanding when to use these patterns vs hooks
Recognizing these patterns in existing codebases

Develop

Code reuse and pattern recognition
Understanding React's evolution and patterns
Evaluating different approaches to sharing logic

Tips

Consider custom hooks as an alternative to render props and HOCs.
Use render props when you need maximum flexibility in rendering.
Be careful with HOC naming and prop forwarding to avoid conflicts.
Understand these patterns for working with older React codebases.

Common Pitfalls

Overusing render props when a simple prop would suffice.
Creating HOCs that cause prop name conflicts.
Not recognizing when hooks would be a better solution.
Forgetting to forward refs in HOCs when needed.

Summary

Render props and HOCs enable code reuse in React.
Custom hooks often provide cleaner alternatives.
These patterns are still valuable for legacy codebases.
Understanding them helps with React's evolution.

Exercise

Create a render prop component that provides mouse position.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    const handleMouseMove = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    window.addEventListener('mousemove', handleMouseMove);
    return () => window.removeEventListener('mousemove', handleMouseMove);
  }, []);

  return render(position);
}

// Usage
<MouseTracker
  render={({ x, y }) => (
    <h1>The mouse is at ({x}, {y})</h1>
  )}
/>

Exercise Tips

Try converting this to a custom hook (useMousePosition) for comparison.
Add error handling for edge cases.
Consider adding throttling for performance.
Experiment with different render prop names (children, render, etc.).

React Patterns: Render Props and HOCs