I am building a reactjs application, I have two options for rendering the components
One is hiding the component and appending the other component on top of it with the same space and different layout.
The other option is re-render and re-create DOM for both the components separately.
React uses diff algorithm to compare and change the states of the DOM, as the component is already present in the DOM so the first solution may work faster. But it will have more amount of in-memory data than the second solution.
On the other hand in the second solution, we have to remove the DOM of one component, render the other component and create the DOM for it again. That looks like a lot of work!
I am confused, which approach should I follow?
This can be depicted as:
<Component1/>
<Component2/>
Solution 1: Hide <Component1/> and Append <Component2/> in the same space.
Solution 2: Remove <Componen1/> and Append <Component2/> in the same space