Profiling the performance of your React components is made easier by React Developer Tools. It makes it easier to spot updates that cause elements to re-render when no re-render is actually necessary. It also makes it easier to collect the amount of CPU time that a given component spends, and where it spends it during its lifespan.
Although React Developer Tools does not include any memory profile tooling, we'll look at how you can use the existing memory developer tool to specifically profile for React elements.
Reconciliation is what happens when a React element is rendered. It first computes the virtual DOM tree that will render the element's current state and props. Then, this tree is compared to the existing tree for the element, assuming it has been rendered at least once already. The reason that React does this is because reconciling changes like this in JavaScript, before interacting with the DOM, is more performant. DOM interactions...
