React Router v4 everything in the Router component re-renders on every route change

Question

I'm trying to understand better why all my components are re-rendering whenever a route changes in React Router v5. Note, these components are only re-rendering not re-mounting. When I open up the react extension in dev tools and select the Highlight Updates checkbox, I can see all my components get outlined when changing routes, even the components that are at a higher level than the route match:

<Router>
  <MyHeader />
  <ComponentWithRoutes />
</Router>

In this simple example, I would expect, that changing routes would not re-render the MyHeader component, since nothing changes. However I will still see a highlight with the dev tools. I assume this is expected, since all the examples in the Docs exhibit the same behavior.

My question is two-fold. 1) What is the actual cause of making a component like MyHeader to re-render? It doesn't seem like any props or state are changing. Is it because of the way the Router is using the Context API? The Router is rendering and causing the children to re-render? 2) Why isn't this considered wasteful? It seems like even though the actual DOM isn't changing, React would still have to go through the reconciliation steps in the virtual DOM. Is it just so fast it's doesn't matter? What happens when you start having tons of nested components?

Answer 1

Yup, this is the lay of the land.

Your components will re-render unless they're React.PureComponent, or otherwise define shouldComponentUpdate(), when the parent component is re-rendered.