Going right to the point!
In React, what does reconciliation mean?
You may have encountered this subject as a "interview question," but as you learn a deep working idea in React, it becomes quite fascinating.
We must first understand what virtual and dom are in order to understand reconciliation.
DOM
DOM stands for Document Object Model which an API(Application Programming Interface ) for HTML and XML files.
Programs can alter the document's structure, design, and content by using it as a representation of the page. The document is represented by the DOM as objects and nodes in a tree structure.
Basically, DOM controls, modifies, and organizes the content that users view on websites!
React's approach towards DOM
React never updates the original DOM tree. React creates a virtual DOM, virtual DOM is an in-memory copy of the real DOM tree. One benefit of creating a virtual DOM is that operations may be synchronized more quickly and easily as is it an in-memory copy of real DOM.
Another is that React only renders the modified components, which improves performance and robustness of the website rather than re-rendering the whole website(Which decreases the perfomance).
Reconciliation
The algorithm React uses to diff one tree with another to determine which parts need to be changed
React runs a diff algorithm on the virtual DOM to find the components that have changed. It then updates only those components that are different from their previous state.
A tree of nodes that describes a React application is created and stored in memory when the application is rendered. After then, this tree is flushed to the rendering environment, where it is transformed into a series of DOM actions for a browser application, for instance. A new tree is created whenever the application is updated, which is often done via setState. To determine which activities are required to update the displayed application, the new tree is compared to the old one.
If there is more than one modified updates that diff alogorithm moidifies in batch manner.
It's not required to apply updates to a user interface (UI) right away; in fact, doing so can be inefficient and lead to frame drops and poor user experience.
And that's reconciliation!
I think it went fairly well for my first experience with technical writing.😅
If anyone is more intrested into the topic and wants to know more about it head on toh the this doc. That will surely help! Would highly recommend.
Top comments (0)