What is Render Props in React?

What is Render Props in React? How to use Render Props in React?

  idkblogs.com      December 20, 2020

Shubham Verma

Shubham Verma


What is Render Props in React?

I

n this article, we'll know about the Render Props in React and we'll get the overall understanding of the Render Props. What are the benefits of Render Props? How we can use the Render Props in our component? Here, In this post, we'll see how we can utilize our codes, it means we increase the reusability of code. You'll get the best in terms of reusability.
Stay Tuned.

What is Render Props?

In React, Render Props is a technique that helps in code reusability. The Render Props basically used to share the codes between two React components. And Render props is a function that is being used to share between components in React.

A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic. In other words, If you want to create a component without render logic, and to receive the render logic of other components in this component, then you can introduce Render Props here. After introducing the Render props, you don't need to write the render logic in this component.

Ex.


We know that we can pass data to child component from component using props technique, and child component receives the data in props object like in below codes:


In the prop, we can pass only Objects, arrays, booleans, strings, Numbers to child components.

Now, we can pass a function to the props object. (Actually, this is the Render Props)



Ex.


In the above codes, we pass a function fn as a prop, this function is used to render the data. Here this functionfn is Render Props. That's why we can say that the Render Prop is a function that has the logic and tell the component what to render.
The Render Props is more useful when we want to send the same data across the components.
Let's have an example, In this, we have an App, and in this app, we have a Header and MainSection component, as:


In the above example, the App component renders the app with Header and MainSection. but the main Section would be different each time. So in the above codes, this logic is not so flexible. We can separate this logic using Render Props as:


In the above codes with Render Prop, is very easy and flexible to use. So now the App render logic is not dependent on MainSection component, you can pass anything to render in the app using Render Props.

Is it render? Really !!

We used the prop name render in the above example. So it seems like it should be render. Right ? But 'NO',
It seems like that because of the term Render Props. Actually, you can have any name to define this.
Ex: Render Prop with a different name: 'render' change to 'toRender'


Way to pass the Render Prop?


You can use props like this:



Or


Conclusion:

In this article, we learned about the Render Props and some code examples. Also, we learned how we can pass the Render Props and How we can use them in the component.


Thank you

for taking the time to read this article. If you’re interested in Node.js or JavaScript this link will help you a lot.

If you found this article is helpful, then please share this article's link to your friends to whom this is required, you can share this to your technical social media groups also. You can follow us on our social media page for more updates and latest article updates.
To read more about the technologies, Please subscribe us, You'll get the monthly newsletter having all the published article of the last month.