How to use render props in ReactJS.

Clap for yourself! You guys have come so far in this React journey with me. Just keep learning and I ensure that I will make you a react master before this year ends. If you remember in my recent blog, I talked about Lists and Keys in ReactJS. Is you haven't read then go and read it. In this blog, I will focus on rendering props in React. So let's get started.

What are Render Props?

Render props are a powerful technique for sharing code and logic between React components. The term “render prop” refers to a prop that is a function that returns a React element. A component with a render prop takes this function as an argument and calls it instead of implementing its own render logic. Let's understand it by taking a simple example.

Suppose you have a component called "Timer" that displays the current time and updates it every second. You can use render props to change how the time is displayed, without changing the logic of the Timer component.

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: new Date() };
  }
  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ time: new Date() });
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  render() {
    return this.props.render(this.state.time);
  }
}

Notice that the <Timer> component does not have any JSX in its render method, but instead calls the render prop with the time state as an argument. The render prop is a function that returns a React element. This way, the <Timer> component can delegate the rendering to its parent component.

Now, suppose you want to use the <Timer> component in different ways. For example, you might want to display the time as plain text, as a digital clock, or as a countdown timer. You can do this by passing different functions as the render prop to the <Timer> component. Let me show you some examples:

//  Will Display the time as a plain text
<Timer render={time => <div>{time.toLocaleString()}</div>} />

// Will Display the time as a digital clock
<Timer render={time => <div>{time.toLocaleTimeString()}</div>} />

// Will Display the time as a countdown timer
<Timer render={time => <div>{60 - time.getSeconds()} seconds left</div>} />

Each of these examples renders a different UI element based on the time value, but they all use the same <Timer> component. This shows how render props allow you to reuse code and logic between components, and customize them based on the props you pass to them. I hope this example helped you understand render props better.

Now the question is why should we use render Props?

Render props are useful for various reasons:

• They allow us to reuse code and logic between components without duplicating it or creating complex inheritance hierarchies.

• They give us more flexibility and control over how we render our components. We can customize the appearance and behavior of our components based on the props we pass to them.

• They make our components more composable and modular. We can combine different components with render props to create new functionality and features.

How to use render props?

Now we have an idea about render props and why we use them. It's also important to understand how to use them. I'm giving you some tips for using render props effectively:

• Use descriptive names for your render props. For example, instead of using children as a render prop, you can use render or component or something more specific to your use case.

• Use prop types or TypeScript to check the types of your render props. This will help you avoid errors and bugs when passing functions as props.

• Use hooks or custom hooks to simplify your code and avoid class components. Hooks allow you to use state and effects without writing classes or lifecycle methods. Custom hooks let you extract common logic into reusable functions that you can call from any component.

• Use context or custom providers to avoid prop drilling. Prop drilling is when you have to pass props through multiple levels of components that don’t need them. Context allows you to share data across your component tree without passing it explicitly. Custom providers are components that use context to provide data or functionality to their descendants.

Conclusion:

In this blog, we learned how to use render props in ReactJS. Render props are a way of passing a function as a prop to a component, and then calling that function inside the component to render something. This allows us to reuse code and logic between components, and customize them based on the props we pass to them.

We saw some examples of using render props to create components that track the mouse position, display the current time, and show the count value. We also learned some best practices and tips for using render props effectively, such as using descriptive names, checking the types, using hooks and custom hooks, and using context and custom providers.

Render props are a powerful technique for sharing code and logic between React components. They allow us to reuse code without duplicating it, customize our components based on the props we pass to them, and make our components more composable and modular. I hope this blog helped you understand what render props are, how they work, and how to use them in your own projects.

If you wanna learn more about render props, then I am listing down some resources. Go and checkout.

• Render Props – React

• React.js Render Props - GeeksforGeeks

Thanks for reading. 😊