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.

                            <SomeComponent render={data => (
                                <h1>Hello {data.name}</h1>
                              )}/>
                            

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:

                        class SomeChildComponent extends React.Component {
                            constructor(props) { }
                            render() {
                               return <div>{this.props.name}</div>
                               }
                            }
                            // paasing the data
                        <SomeChildComponent name="Shubham Verma" />
                    

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.

                        
                        class SomeChildComponent extends React.Component {
                            constructor(props) { }
                            render() {
                                return <div>{this.props.fn()}</div>
                            }
                        }
                        <SomeChildComponent fn={() => 'Shubham Verma'} />
                    
                    

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:

                                class Header extends React.Component {
                                    render() {
                                        return <h1>This is Header</h1>
                                    }
                                }
                    
                                class MainSection extends React.Component {
                                    render() {
                                        return <h1>This is MainSection</h1>
                                    }
                                }
                    
                                class App extends React.Component {
                                    render() {
                                        return (
                                            <div>
                                                <Header />
                                                <MainSection />
                                            </div>
                                        )
                                    }
                                }
                            
                            

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:

                        
                        class Header extends React.Component {
                            render() {
                                return <h1>This is Header</h1>
                            }
                        }
                    
                        class MainSection extends React.Component {
                            render() {
                                return <h1>This is MainSection</h1>
                            }
                        }
                    
                        class App extends React.Component {
                            render() {
                                return (
                                    <div>
                                        <Header />
                                        {this.props.render()}
                                    </div>
                                )
                            }
                        }
                        <App render={()=><MainSection/>} /> // We are passing a component in Render Prop.
                    
                    

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'

                        
                        class Header extends React.Component {
                            render() {
                                return <h1>This is Header</h1>
                            }
                        }
                    
                        class MainSection extends React.Component {
                            render() {
                                return <h1>This is MainSection</h1>
                            }
                        }
                    
                        class App extends React.Component {
                            render() {
                                return (
                                    <div>
                                        <Header />
                                        {this.props.toRender()}
                                    </div>
                                )
                            }
                        }
                        <App toRender={()=><MainSection/>} /> // We are passing a component in Render Prop.
                    
                    

Way to pass the Render Prop?

You can use props like this:

                    App toRender={()=><MainSection/>} />
                    

Or

                        <App>
                            {()=><MainSection/>}
                        </App>
                    

---

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.