'location' prop not changing in a component with 'withRouter'

[oreqizer]

Version

4.1.2

Test Case

https://codesandbox.io/s/61m9v82r7n

Steps to reproduce

Navigate between Home and Home + query.

Fix

The problem can be fixed by changing Child from being a PureComponent to Component. This is very weird as it has absolutely no connection to either being a child of the <Route /> component, or being the one that is decorated with withRouter.

Expected Behavior

I expect DeepChild's location prop to change whenever the URL changes.

Actual Behavior

DeepChild's prop is not changing despite it being correctly connected to withRouter.

Note

The setup, together with the connect usage, is exactly how I encountered it in my project. I did not test the issue without using connect.

[pshrmn]

Have you read the blocked updates guide? https://github.com/ReactTraining/react-router/blob/v4.2.2/packages/react-router/docs/guides/blocked-updates.md

As explained in there, any component that blocks updates (shouldComponentUpdate() { return false; } or class MyComonent extends React.PureComponent) needs to be provided a prop that changes when the location changes.

[oreqizer]

I did read it, however I thought that wrapping a component in withRouter gets around any blocked updates

do I understand correctly that I need to wrap every single pure component in the hierarchy in withRouter or pass the location prop from the upmost parent so the changes propagate?

[pshrmn]

Only components that do update blocking need to be wrapped/receive a prop that changes when the location changes.

If you have a long chain of PureComponents that you are needing to get around, it might be appropriate to take a look at whether or not those components actually need to be "pure". When a component says it doesn't need to be updated, it is also speaking for its children, so if a child needs to update when the location changes, the parent shouldn't be blocking it.

I understand that this is quite different from mobx/redux where they set up a ton of subscriptions to update specific components in order to render an app at 60fps. They have to go through pains to manage subscriptions and prevent extra re-renders. With React Router, state changes come much less frequently, but in a larger scope (most components re-render/unmount). I think that in this situation, it makes sense to propagate changes out from the source (the <Router>). This might break down if someone is changing URLs 60 times per second, but I can't think of any real world use for that.

[oreqizer]

ok, thanks for the explanation

[macrozone]

When a component says it doesn't need to be updated, it is also speaking for its children, so if a child needs to update when the location changes, the parent shouldn't be blocking it.

i think that's not true. A component should never assume whether its children are components or connected containers:

<PureComponent>
   <Component1 />
   <Component2 />
</PureComponent>

Wether Component1 or Component2 should ever rerender is of no concern of PureComponent. Redux handles this case correctly: if Component1 is connected, it rerenders its children whenver the mapped state changes.

But if Component1 uses withRouter hoc, it does not re-render on location changes. I would expect withRouter to behave similar to connect in this regard.