Comparison
Component memoisationvsRe-render
Component memoisation
you wrapped the component so it skips re-rendering when its props are shallowly the same.
Caching a component's rendered output and reusing it when its props have not changed by shallow comparison. It only helps when the props actually stay referentially stable, so a memoised component receiving an inline callback re-renders exactly as before while now also paying for the comparison. Applied without measuring, it usually adds cost and hides the real problem, which is a parent re-rendering more than it needs to.
Full entry →Re-render
the component function runs again from the top, even though nothing on screen ended up changing.
One execution of a component's render function in response to a state or prop change. It is not the same as a DOM update: most re-renders produce identical output and result in no DOM work at all, which is why 'it re-rendered' is not by itself a bug. It becomes one when the render function is expensive or when it cascades through a large subtree on every keystroke.
Full entry →