Frontend & browser·Rendering and the browser pipeline
the component function runs again from the top, even though nothing on screen ended up changing.
Re-render
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.