React Re-render Best Practice

In this post i will discuss how if we split the components can affect the performance of our react app.

first, the code will be two components :

This is first component

This is second component that we imported it in the component above

Let's check console :

now we see every time we click on the button, the state changed and then re-render the component then <Child /> will be rendered every time we click on button !!!!!!!!, we don't need that to happen because the <Child /> don't have any code that is relevant to main component, in other words don't have any relation to the color state, so we don't need to re-render it again because we clicked on the button

Solution of This problem :

first we need to make new file contain these two components like this below

and these two components now :

now let's see the console :

we can see that we can click the button and there is no more un-necessary render and that is the required.

That is my first post in dev.to and in the future i want to share more and more about react in this website, so leave your feedback about the post to make the next posts more organized, more useful.