Reconciliation Explained: React Interview Questions
What is Reconciliation in React? It is a process of comparing of the updates in the application interface. Reconciliation relies on React's Virtual DOM.
Video about Virtual DOM in React is here: • Mastering Virtual DOM: React Interview Que...
#reactjs #reactjstutorial #codinginterview
------------------------------------------------
Hello, my name is Konstantyn, I'm a Senior Frontend Engineer working in the lovely city of Warsaw. My main technology stack is React. Please ask me questions in comments and subscribe for more tutorials like this!
✅ Follow Me:
LinkedIn: / kostiantyn-burlai
GitHub: https://github.com/burlai
☕ Buy Me A Coffee: https://www.buymeacoffee.com/konstantyn
-------------------------------------------------
As you already know from my previous video, the Virtual DOM is just a JavaScript object that represents the real DOM tree. When any changes occur in the application interface, the first thing React does is create a new Virtual DOM for the component where the changes took place. It is important to note that the rest of the application, whether it's the Virtual DOM or the real DOM in the browser, stays completely untouched. React only works with the changes in that specific component.
After creating the new Virtual DOM, React launches the diffing algorithm, which compares the new object with the old one. This algorithm uses so called heuristic method. In simple terms it means that when comparing two objects, they are not compared entirely, but only their essential parts are compared. React starts from the top of the object tree, and the first thing it compares is the types of DOM elements. If the type of element in the new object is different, further comparison is skipped. And then React simply replaces that element entirely, including its children and props. Replacing an entire element tree is slightly less performant but helps avoid errors. If the element remains the same, React then compares its props: content, class names, children and so on.
Only when the comparison between the old Virtual DOM and the new one is completed, React applies the changes to the real DOM - the one we see in the browser. It is essential to remember that the Reconciliation process we've been discussing for a few minutes actually takes tiny fractions of a second because all these computations happen in Reacts memory. More to say, these computations are highly optimized because of usage of the heuristic method.
When there are some frequent changes to the user interface, React utilizes a technology called Batching. Deep dive into Batching is a topic for another video, but in short, React doesn't apply each change to the real DOM the moment it's computed. Instead, React "collects" several changes in one package and applies them to the real DOM all at once. I'll make a separate video on React batching, so stay tuned.
That's all you need to know about Reconciliation as a React developer. Thank you so much for watching my tutorial Hit that like button & happy coding!
![Bartosz Domiczek - D2 Talks #33 [interviewed by Fabio Palvelli]](https://images.mixrolikus.cc/video/_sQkFBCvblE)
