Generally, a React application is made up of several components. As the application grows, we may encounter a situation where the same piece of code is being used in more than one component. Writing the same code in multiple places across the application is pointless, right? So React provides a brilliant way to share code among the components. It is called render props.
Props in React
Props and state are two essential parts of a React component. While the state is controlled from within the component, props are passed from the parent component to a child component. In other words, props are controlled by another component.
Generally, props are objects that, unlike the state, are immutable. React has a unidirectional flow, meaning data can be passed from the parent component to the child component. Props are data but render props is a bit different from general prop data.
So as mentioned above, props are data passed from one component to another. render props is something similar. It is an advanced technique using which “code is shared” among components. Yes, instead of the usual data, we can also pass the code from one component to another in React.
For example, observe the following code.
In the above example, demoFun is passed as a prop to the Child component.
demoFun is a piece of code, so we are using render props.
Understanding render props
Let’s try to understand render props step by step with the help of a working example. Observe the following code.
In the above code, a state named count is defined using the useState() hook. There is a button in the component that increases the value of count with every click. The value of count is displayed below the button.
Now, suppose, we need another button that will decrement the value of count by 1 on every click, but this button should be present in the child component of the App component. How can we do this? The state is present in the parent component and how to update it from the child component? Well, there can be different ways to solve this problem. Let’s use render props here.
In the App component, add the following function.
Now, observe the Child component.
As of now, the Child component has a button but it does nothing when clicked. To make things work, we need to invoke decrementHandler when this button is clicked, but the decrementHandler is in the parent component. This is where render props enter.
We have to pass decrementHandler as a prop from the App component to the Child component.
Now in the Child component, we can use the decrementHandler with the button.
Let’s use it in the Child component.
This is how the App component looks.
Let’s understand what is happening in the application.
- App component has a button that increments the value count by 1 whenever it is clicked.
- Child is the child component of the App component and it also contains a button.
- The button in the Child component decrements the value of count by 1 whenever it is clicked.
- The state (count) is present in the App component, so we created both the functions to handle increment and decrement in it only.
- But the decrement function, i.e. decrementHandler is required in the Child component
- So, the decrementHandler is passed as a prop to the Child component, thus using render props.
Wrapping it up
In simple words, the technique of passing code (or function) from a parent component to a child component as props is known as render props. It is a simple yet very useful technique. Like in this article, we had a state in the parent component which was to be mutated by the child component. So instead of using something more complex like redux, we used much simpler and easier render props.