Render Props in React

Implementation of Render Props

Okay, Let’s go slowly,

There are mainly two parts in the definition of render props:

1. Prop whose value is a function
2. Sharing code

To demonstrate the above two steps, we will implement a react app with two counter buttons. When we click on the button, it will display the number of times it has been clicked. 

The implementation will have to maintain a state variable for storing the count of how many times a button is clicked, and also, we will create a function to increment the count variable.

 

Firstly, we will see the naive implementation, and then we will see the improvements and optimizations done with render props in react.

Naive Implementation

App.js

In App.js, we separately use the Counter1 and Counter2 components to get the functionality of buttons as shown above.

 

import React from 'react'; import './App.css'; import Counter1 from './components/Counter1'; import Counter2 from './components/Counter2'; function App() {   return (     <div style={{textAlign:"center"}}>       <h1>Render Props in React</h1>         <Counter1/>       <Counter2/>       </div>   ); }   export default App;

 

Counter1.js

 

We define a separate state of the Counter1 button, and it includes the state variable count and the increment count function in it. 

 

import React, { Component } from 'react' export class Counter1 extends Component {    state = {count:0}  incrementCount = () => {         this.setState({             count: this.state.count + 1         })     }   render() {         return (             <div>                 <button style={{color: "red", fontSize:"40px"}} onClick={this.incrementCount}>                     Clicked {this.state.count} times                 </button>             </div>         )     } } export default Counter1

 

Counter2.js

 

Similar to the implementation done in the Counter1.js, The component, Counter2 also has its state variable count and the function incrementCount in it.

 

import React, { Component } from 'react' export class Counter2 extends Component {  state = {count:0}  incrementCount = () => {         this.setState({             count: this.state.count + 1         })     }   render() {         return (             <div>                 <button style={{color: "blue", fontSize:"40px"}} onClick={this.incrementCount}>                     Clicked {this.state.count} times                 </button>             </div>         )     } } export default Counter2

 

Output

 

 

In the naive implementation, we can observe that the code is getting repeated in Counter1.js and Counter2.js. This is not desirable and leads to a large amount of code in our codebase. This also leads to complications.

 

Now, we will look at the better version of implementation that uses render props in react.

Better implementation using the render props

App.js

 

Firstly, we use the wrapper class component from having a render prop that has a function with two parameters, namely the current state “count” and the incrementCount part. This technique is known as the render props in react.

 

import React from 'react'; import './App.css'; import Wrapper from './components/Wrapper'; import Counter1 from './components/Counter1'; import Counter2 from './components/Counter2'; function App() {   return (     <div style={{textAlign:"center"}}>       <h1>Render Props in React</h1>       <Wrapper render={(count, incrementCount)=>{         return <Counter1 count={count} incrementCount={incrementCount}/>       }}/>        <br />        <Wrapper render={(count, incrementCount)=>{         return <Counter2 count={count} incrementCount={incrementCount}/>       }}/>    </div>   ); } export default App;

 

Wrapper.js

The parameters count and the function incrementCount are implemented in the Wrapper component. This component basically includes the duplicate code that is to be supplied to both counter1 and counter2 components.

 

We initialize the state of the count variable in this component to zero. And the incrementCount function takes the current state count variable and increments it precisely that by 1.

 

After that, these two are passed as the parameter into the render parameter present in the props of Wrapper defined in App.js. Since there is a function in the render props, we call that function to pass on these variables into App.js, and from there it is further passed onto counter1 and counter2 components. 

 

import React, { Component } from 'react' export class wrapper extends Component {   state = {count:0}     incrementCount = () => {         this.setState({             count: this.state.count + 1         })     } render() {         return (             <div style={{textAlign: "center"}}>                 {this.props.render(this.state.count,this.incrementCount)}             </div>         )     } } export default wrapper

 

Counter1.js

The state variable count and the function incrementCount those received in the props of Counter1 from the render props used in the App.js. 

We simply embed these props received in the button to display it.

 

import React from 'react'; const Counter1 = (props) => (     <button style={{color: "red", fontSize:"40px"}} onClick={props.incrementCount}>         Clicked {props.count} times     </button> ); export default Counter1;

 

Counter2.js

Similar to Counter1.js, we also simply embed these variables into the button to display them.

 

import React from 'react'; const Counter2 = (props) => (     <button style={{color: "blue", fontSize:"40px"}} onClick={props.incrementCount}>         Clicked {props.count} times     </button> ); export default Counter2;

 

Output

 

Frequently Asked Questions (FAQS)

1. What are render props?

Render props are the components with a prop that takes a function as an argument that returns a react component.

2. Why do we need Render props in react?

“Render props” is a technique used to allow code sharing among components; this helps in code reusability in react.

3 .What is a wrapper component?

The wrapper component is used to include the render logic of duplicate code in different components. Then this component contains all the state/functionality required by various components with similar code. 

Key Takeaways

We learned how the technique of render props in react helps us avoid DRY (Don’t Repeat Yourself) code. You will always find this technique handy in your next big project. Some of the points that you could keep in mind are about render props in react:

• Render prop is a function prop.
• It is used for sharing code among components.
• A component uses it to know what is to be rendered and displayed.
• It makes it possible to promote code reusability among the components.

Apart from this, you can also expand your knowledge by referring to these articles on Javascript and React.

Check out this problem - Duplicate Subtree In Binary Tree

For more information about the react framework for frontend development get into the exclusive Frontend web development course.