I will keep it short and it was actually asked of me in a React interview, so I am sharing it with you guys.
Re-rendering Basic In React.
Re-rendering Basic In React.
We all know that there are 3 main reasons that force a component to re-render in the react world.
If the state of the component is changed.
If the Context to which the component is subscribed is changed
If the Parent Component is re-rendered, it will force the child to re-render too.
Now let’s assume you have a component that has a counter button. If we click that button the counter is updated and increased by 1. Now in the same component, we have a List Component which is rendering a list of around 100,000.
As you can see in the above code, when I click on the button it will increase counter by 1. But because it is parent to some component it will force SlowComponent to re-render. It will make our app slow because we are unnecessarily re-rendering SlowComponent as it is not required because it is not using state in its component. So rendering it once was enough.
Now how can we save this unnecessary re-render? So I will show you a nice little trick that will save you from this re-render and it is the most commonly asked scenario in a React interview.
Solution
First I will show you the code and then we will discuss how it changes the behavior of our app.
So what did we change? If we look into the Dom Tree, the Component hierarchy is the same but the only change we made is that we pass the child component to the parent component using props. Now if we look into our app and click the button we will see it is much faster because now our app is re-rendering the parent component without re-rendering the child component which in our case is SlowComponent.
But How?
Now how it changes the behavior. For this, you will need a deep knowledge of how reconciliation works. This blog will be read by beginners also so I will try to keep it simple as possible.
What Is Reconciliation?
Reconciliation is the process that React uses to update the DOM to match the desired virtual DOM representation of your components. When a component re-renders, React compares the new virtual DOM with the previous virtual DOM to identify what has changed. It aims to make these updates as efficient as possible.
Now if I just give you a beginner's guide, this process checks for 2 things if the Type Or Props of element is changed.
If the Type is changed it will unmount the previous component and mount the new one, this is because a change in element type implies that a completely different component should be rendered.
If the props have changed, React will re-render the component to reflect the new props. It performs shallow checks of previous and new props.
What happens in our example case?
If the child component (received as a prop) remains the same type and has the same props as in the previous render, React will avoid re-rendering the child component. This is because it considers the component to be “pure” and assumes that it will produce the same output given the same input (props).
However, if the props passed to the child component change, React will re-render the child to reflect these new props, even if the parent component re-renders.
If the type of the child component passed as a prop changes, React will unmount the old child component and mount the new one.
Conclusion!
So this is a nice little trick that will help you optimize your app. I hope you will find this article helpful.
You can follow me on Linkedin Or You can buy me a Coffee if want.