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 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.
Top comments (0)