Understanding Render Props in React | Simple Example with Code

In React, "Render Props" is a design pattern that allows a component to pass a function as a prop to its child components. This function can then be used by the child components to render their content, making it a versatile and reusable method of sharing functionality between components.

To illustrate this concept, let's create a simple example. We'll start by creating a component called "MouseTracker", which will track the position of the mouse as it moves around the screen:

cd re    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 style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

export default MouseTracker;

In the above code, we have created a class component "MouseTracker" that tracks the position of the mouse using the state object. The component also has a method called "handleMouseMove" that is called whenever the mouse moves, updating the state with the current x and y coordinates.

In the render method, we have added an event listener to the div using the "onMouseMove" prop. We are also rendering the result of a function call, "this.props.render(this.state)", which takes the current state as an argument.

Now, let's create a child component that uses the "MouseTracker" component to render a circle that follows the mouse:

import React from 'react';
import MouseTracker from './MouseTracker';

class Circle extends React.Component {
  render() {
    return (
      <MouseTracker
        render={({ x, y }) => (
          <div
            style={{
              position: 'absolute',
              top: y,
              left: x,
              width: 20,
              height: 20,
              borderRadius: '50%',
              backgroundColor: 'red'
            }}
          />
        )}
      />
    );
  }
}

export default Circle;

In the above code, we have created a child component called "Circle" that uses the "MouseTracker" component to render a red circle that follows the mouse. We are passing a function to the "render" prop of the "MouseTracker" component, which takes the current state object (containing the x and y coordinates) as an argument and returns a div with the circle style properties set.

Replicate

To replicate this example on your local machine, follow these steps:

1. Create a new React project using "create-react-app" by running the following command in your terminal: npx create-react-app my-app

2. Change into the project directory: cd my-app

3. Replace the contents of the "App.js" file with the "MouseTracker" and "Circle" components code above.

4. Run the project: npm start

You should now see a red circle that follows your mouse movements on the screen.

---

Conclusion

In conclusion, "Render Props" is a powerful and flexible design pattern in React that allows for reusable and composable components. By passing a function as a prop to a child component, we can abstract functionality and make it easy to reuse across our application.