score:5

Accepted answer

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.


Related Query

More Query from same tag