Developer and Blogger
DOM Manipulation is the process by which one can dynamically change the content of the web page. Working with DOM should be fairly easy and quick as it is always tree-structured, traversing the DOM is easy.
In React, changes are made to the
and then synced to the React DOM. This process is call Reconciliation. React can figure out which objects have been changed, and this process is called drifting.
// Old version <div><Tree/></div> // New update <span><Tree/></span>
React will delete the tree, and rebuild the entire tree again.
// Old <span id="span1" /> //New <span id="span2" />
Only the difference will be found in the attribute and will be changed accordingly.
// old <ul> <li>Child1</li> <li>Child2</li> </ul> //New <ul> <li>Child1</li> <li>Child2</li> <li>Child3</li> </ul>
The new element will be added to the end of the list.
// Old <ul> <li>Child1</li> <li>Child2</li> </ul> //New <ul> <li>Child3</li> <li>Child1</li> <li>Child2</li> </ul>
As the new element is added to the beginning it will be rebuilding the entire list again.
☕Thanks For Reading | Happy Coding🤨
I have written over 130+ Article on https://rahulism.tech
Previously published at https://rahulism.tech/article/dom-manipulation-in-react/
Create your free account to unlock your custom reading experience.