React - Render Props

Using render props pattern

The render props pattern is a technique in React for sharing code between components using a prop whose value is a function. This tutorial covers how to use the render props pattern to create reusable and flexible components.

Creating a Component with Render Props

To create a component that uses the render props pattern, you define a prop that is a function and call it within the component's render method.

// src/components/Mouse.js
import React, { Component } from 'react';

class Mouse extends Component {
    state = { x: 0, y: 0 };

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

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

export default Mouse;
                

Using the Render Props Component

To use the component with render props, you pass a function to the render prop that receives the state and returns what should be rendered.

// src/components/MouseTracker.js
import React from 'react';
import Mouse from './Mouse';

const MouseTracker = () => {
    return (
        <div>
            <h1>Move the mouse around!</h1>
            <Mouse render={({ x, y }) => (
                <p>The current mouse position is ({x}, {y})</p>
            )} />
        </div>
    );
};

export default MouseTracker;
                

Combining with Other Components

The render props pattern allows you to combine multiple components and reuse logic. Here is an example of combining the Mouse component with another component to draw a circle at the mouse position.

// src/components/Cat.js
import React from 'react';

const Cat = ({ mouse }) => {
    return <img src="/cat.png" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} alt="Cat" />;
};

export default Cat;

// src/components/MouseWithCat.js
import React from 'react';
import Mouse from './Mouse';
import Cat from './Cat';

const MouseWithCat = () => {
    return (
        <div>
            <h1>Move the mouse around!</h1>
            <Mouse render={(mouse) => (
                <Cat mouse={mouse} />
            )} />
        </div>
    );
};

export default MouseWithCat;
                

Best Practices

Here are some best practices for using the render props pattern in your React applications:

• Use render props to share code and logic between components in a flexible way.
• Keep the render function simple and focused on rendering UI based on the received state.
• Avoid using render props for deeply nested components as it can lead to less readable code.
• Consider other patterns like hooks or higher-order components for certain use cases.

Summary

In this tutorial, you learned about using the render props pattern in React. The render props pattern allows you to share code and logic between components using a prop that is a function. By creating components with render props, using them to pass functions, and following best practices, you can build more reusable and flexible React applications.