Today I decided to revisit one of my favorite blogs, The developer way. I found a very interesting article about React reconciliation: how it works and why should we care.
Reconciliation in brief
Reconciliation is a process of comparing two representations of the DOM and then update the DOM with the results. React uses a diffing algorithm to determine the changes in the virtual DOM and then update the real DOM.
To compare elements, React uses type and key. If the type and key are the same, React assumes that the element hasn’t changed. If the type is different, React will unmount the old element and mount the new one. If the type is the same, React will update the props of the element.
Why declaring components inside other components is an anti-pattern?
if you ever wrote something like this:
const Component = () => {
const Child = () => <input />;
return <Child />;
};If the parent Component re-renders itself for any reason, the Child component that is declared inside will re-mount itself on every re-render, which is terrible for performance.
I felt like I need to look more into the subject, therefore I ended up purchasing a book called Advanced React by the blog author herself. I will read it, and keep sharing what I have learned.