Does React render the WHOLE component if only one part of the component changed?

Question

I am wondering if my code will be more performant if I split my large component up into many really tiny components, so that the app only renders smaller portions of the DOM at a time.

But I feel that React may already only render the portion of the app that changed, regardless of if the component is massive or tiny. So if a tiny part of a massive component is changed, React will only re-render that tiny portion of the component, and not the whole component.

Is my assertion in the second paragraph correct, or can I get better performance by splitting a large component into many small ones? I'm including both ReactJS and React Native in this question. I assume they're the same in this aspect but if they differ I would like to know.

Answer 1

I been immersing my self in React, so I hope my understanding is valid. React uses a virtual DOM to optimize rendering of the actual DOM. Essentially diffing the two and only patching the DOM with differences. So I believe your assertion is correct.

In regards to breaking up your large component, I think it all depends on state and what your component looks like. These are the question I would ask myself: Are there multiple UI units that can stand alone and be encapsulated into a component? How much of my component is actually affected by a state change?

My understanding is that the component will not re-render unless there is a state change. React provides a lifecycle hook shouldComponentUpdate, which does not affect it's child components, so that developers can control the rendering of the component on state change. Therefore, if there are many JSX elements that do not change, it is better to extract into a component the elements that are affected by state change. I believe that we can gain performance by not having the virtual DOM update with items that do not change.

While writing up this answer, I googled and found this blog entry: React is Slow, React is Fast: Optimizing React Apps in Practice. I have not used the tools mentioned there, but I will probably try them out soon. I believe that this article can shed some light on the second part of your question.