One time someone more experienced told me that I shouldn't create many react components, because it would affect my performance in a bad way. But as I am studying react more deeper I found that creating separate components prevent re-render of other components if the state of one of then changes. So how should I keep going?
CodePudding user response：
The first thing that is important to remember is that there is no absolute rule regarding how you will divide your application into components, what is needed is a pragmatic view of the matter. That said, if we look at it on the one hand, nothing prevents us from making an application in a single component, but why don't we?
1- Knowing which pieces of state and event handlers went with what parts of JSX would be very hard...
2- Code sharing/reusability would be difficult
3- All yours tests will be integration tests, which would not allow a good unitary approach to the "parts" of the app.
And as you said, Performance would probably suffer, because every state change results in a re-render of the entire application - which breaks the whole idea of single page applications. So, writing custom components allows us to solve these problems.
However, you need to remember that breaking a single component into multiple components is what's called "abstraction" and every abstraction comes with a cost(you can read this for more https://kentcdodds.com/blog/aha-programming#aha-), and you have to be aware of that cost and the benefits before you take the plunge.
obs: I wrote this answer based in these: https://kentcdodds.com/blog/when-to-break-up-a-component-into-multiple-components, https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction
CodePudding user response：
No, because when creating different types of components they can be reused somewhere in your project and it will boost your performance and using react.memo it will more efficient.
CodePudding user response：
I don't think the advice was exactly correct. When we create a rendered component, React creates a virtual DOM for its element tree in the component. Now, whenever the state of the component changes, React recreates the virtual DOM tree and compares the result with the previous render
So, when you create multiple components, only these whose state has changed would re-render, which is way more optimized compare to re-rendering everything