There are times when working with React you get something unexpected on UI and you are just sitting there wondering why is React behaving weirdly?
Well, if you understand how React figures out stuff under the hood, you might avoid falling into this situation up to some extent.
So, what exactly does reconciliation mean?
Reconciliation refers to build again or to restore. Hmmm, interesting but how does this fit with React you might ask?
Well, whenever something changes in your UI React is figuring out what changed and then it needs to rebuild the DOM nodes to update the DOM tree. And React does it quite efficiently too. But there are some guidelines that React follows in order to decide what exactly needs to be updated and rebuilt.
Let's look at these guidelines:
If the type of root element changes, rebuild the tree from scratch
This means, if you change <a> tag to <img>, or a <button> tag to a <div> tag, without even changing the underlying state or child elements, React will still say, hey this is an entirely new element, so I will have to rebuild from scratch.
<div>Hello from React!</div>
<button>Hello from React!</button>
So, if after an update your element tag changes from <div> to <button> without even updating the underlying text or state, React will still rebuild the tree.
On the other hand, if only some attributes of the element change, then React knows that it only needs to update the particular attribute and not the entire element.
<p className="normal">Hello from React!</p>
<p className="bold">Hello from React!</p>
In this case, React only updates the className and does not rebuild the element itself.
When updating a list of children, iterate top to bottom and compare on the go
When you have a list of elements to display, React will start comparing your list items from top to bottom and if it comes across a new element, it will update each element after that in the list.
So let's say you have a list and you add a new item at the end of it
<li>First</li>
<li>Second</li>
//After update
<li>First</li>
<li>Second</li>
<li>Third</li>
Here React will start iterating and see that the first two elements are the same, so no need to rebuild them, but the last item is new, so it will just add that item to the list of Nodes.
But, the same doesn't hold true for adding an item at beginning of the list, because when React starts iterating it will see the very first item of the list has changed, so it will assume that the entire list needs to be updated without realizing that the rest of the list items didn't change.
Hmmm, that's interesting.
So what's the solution to this?
Keys to the rescue!
In order to tell React about what has changed, we need to provide each list item with a unique key. That will eventually help React in identifying the unique elements, and if the key changes then only React will update the node.
Again, try to make your keys unique and static, and avoid using index as keys because that will again confuse React when you perform any operation on the list which changes the index numbers of the items and then you might fall into the unexpected weird issue we were trying to solve so far!
That's all for this article!
I hope you have gained something from this and may it prove helpful in your React journey!
If you like this article, you can appreciate it by leaving a like or any feedback or appreciation is welcomed in comments!
Thanks for reading!