Introduction: Why React Render Props Matter

As your React app grows, you’ll often encounter the need to share logic between components. Maybe multiple components need mouse tracking, form handling, or state synchronization.

One elegant solution is the Render Props pattern—a technique where a component’s child is a function, allowing custom rendering and logic sharing between unrelated components.

Before Hooks, Render Props were one of the go-to solutions for abstraction. Even today, understanding Render Props helps you:

• Reuse logic without higher-order components (HOCs)

• Avoid prop drilling

• Improve component composability and readability

Let’s explore how this pattern works and how you can use it to clean up your React codebase.

What Are Render Props in React?

A render prop is a function passed as a prop to a component, which returns JSX. The receiving component calls this function instead of rendering fixed content.

Simply put: “Render Props” means sharing logic via a prop that’s a function returning React elements.

Creating a Component with a Render Prop

✅ Basic Example: Mouse Position Tracker

import React from 'react';

class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = event => {
    this.setState({ x: event.clientX, y: event.clientY });
  };

  render() {
    return (
      <div onMouseMove={this.handleMouseMove} style={{ height: '100vh' }}>
        {this.props.render(this.state)} {/* render prop */}
      </div>
    );
  }
}

Now use it like this:

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

✅ This separates behavior (tracking mouse) from presentation (rendering output).

Step-by-Step: How to Use Render Props

Step 1: Create a Logic Container Component

Write a component that manages the shared logic (e.g., scroll, resize, mouse position).

class WindowSize extends React.Component {
  state = { width: window.innerWidth, height: window.innerHeight };

  updateSize = () => {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  };

  componentDidMount() {
    window.addEventListener('resize', this.updateSize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateSize);
  }

  render() {
    return this.props.children(this.state); // render prop via children
  }
}

Step 2: Consume It With a Function

<WindowSize>
  {({ width, height }) => (
    <p>Window size: {width} x {height}</p>
  )}
</WindowSize>

• This lets different components render UI differently while using the same logic.

Use Case Table: When to Use Render Props

Complete Example: Toggle Component Using Render Props

import React from 'react';

class Toggle extends React.Component {
  state = { on: false };

  toggle = () => this.setState(prev => ({ on: !prev.on }));

  render() {
    return this.props.children({ on: this.state.on, toggle: this.toggle });
  }
}

Usage:

<Toggle>
  {({ on, toggle }) => (
    <div>
      <button onClick={toggle}>
        {on ? 'Switch Off' : 'Switch On'}
      </button>
      {on && <p>The toggle is ON</p>}
    </div>
  )}
</Toggle>

✅ This pattern works like a charm when you want to encapsulate logic and delegate rendering to the consumer.

Tips & Common Pitfalls

✅ Best Practices

• Use descriptive names for props like render, children, or content.

• Combine with TypeScript or PropTypes to type-check your render function.

• Prefer children as a function for cleaner, JSX-like syntax.

❌ Common Pitfalls

• Nesting too many render props can cause the infamous “callback hell”.

• Don’t overuse this pattern when Hooks would be simpler.

• Be mindful of performance, as render props re-invoke functions on every render.

Comparison: Render Props vs HOC vs Hooks

Conclusion: Use Render Props for Flexible Code Reuse

React Render Props offer a powerful yet clean way to reuse logic between components—especially when components need the same behavior but different rendering.

While Hooks are now more common, Render Props still have a place in:

• Legacy codebases

• Libraries

• Advanced component design

By using Render Props, you keep logic modular, boost reusability, and give consumers full control over rendering.

Key Takeaways

• Render Props allow you to pass a render function as a prop to share logic.

• It’s a powerful tool for custom rendering and separation of concerns.

• Use it when multiple components need shared logic but unique UIs.

• Avoid nesting too deeply—consider using Hooks when simpler.