mapStateToProps called when component not due to render

[justincrow]

Hi,
I have a conditionally displayed component, based on a value in redux. All components below are connected.

eg in a wrapper component's render method:
{ (showValueInRedux) ? <ComponentUsingShowValue/> : <EmptyComponent/> }

ComponentUsingShowValue has a mapStateToProps that uses redux state that it expects to be there, hence we guard for that with showValueInRedux in the wrapper component.

In version 6, mapStateToProps in ComponentUsingShowValue is only called when that component is due to render.

In version 7, mapStateToProps is called even if the wrapping component has switched to choosing EmptyComponent due to showValueInRedux being false (after having once been true).

This causes an exception in our current code because the redux values that mapStateToProps uses ( in the now non-rendered component) are not available.

Please could you clarify this change in behaviour?

[timdorr]

We still ensure top-down update ordering. It is one of our biggest challenges with this library. AFAIK, we didn't change this behavior in 7.0.

Can you provide an example of what you're seeing in a Codesandbox? We need a reproducible test case to work with in order to figure out what's going on here.

[Andrekra]

I can confirm we're having the same issue (effectively breaking our application when upgrading from v6 to v7)

Here's an simple example (mind the typo's):

const shouldRender = WrappedComponent => props => props.shouldRender ? <WrappedComponent {...props} /> : null

const MyComponent = compose(
  connect(state => ({ shouldRender: Boolean(state.page) })),
  shouldRender,
  connect(state => ({ title: state.page.title }))
)(MyBaseComponent)

<MyComponent />

store.dispatch({ type: 'CLEAR_STATE' }) // => Sets state.page to null

In this example, if shouldRender becomes true, it mounts MyBaseComponent. When for some reason the state is cleared (new api request), it unmounts again (state.page === null). However the last connect still receives a state update (state.page has changed) even though it's about to get unmounted. Even if we would guard state.page.title, it still would be a performance hit as all child components would recalculate a new value (think of custom mappers of data on every child component)

We have a HOC that prevents mounting the component if certain data is not in the state (page not loaded). The next HOC (the connect) uses that data to display some information. The reason why we approach it this way, is that we can block a complex panel with many child components (with their own connects) from mounting, so the selectors used in the connects of the children don't break.

I haven't resolved the issue.

[markerikson]

@Andrekra : as Tim said, it would really help if you can provide a project that reproduces the issue, preferably as a CodeSandbox.

[unrevised6419]

I also encountered this problem after upgrading to ^7.0.
After some analysis with my colleague we understood why this happened.
But did not understood why this was not happened before.
In our case this is how JavaScript scopes works.

https://codesandbox.io/s/p9mp9rqq4m

At first render AppImpl.props.myObject is undefined and TheConsumer.props.render function catches it into scope.
TheConsumer.props.render will be called only when TheProvider.props.value.myObject will have some value, but myObject from TheConsumer.props.render will still be AppImpl.props.myObject that was caught in first render and is undefined.

And this is the right behaviour.
A solution to this is to move all logic from TheConsumer.props.render into a Component, and connect that Component to redux

When app renders you'll se in console

TheProvider mapState 
undefined
App mapState 
undefined

And an async action was dispatched to set myObject. After some delay you'll see

TheProvider mapState 
Object {test: "!!!"}
The above error occurred in the <Context.Consumer> component:
  in TheConsumer (created by AppImpl)
  ...

As you can see TheProvider can see the new state, and TheConsumer.props.render is called, that has a reference to myObject that is undefined, and a error is thrown because test does not exist on undefined

Also if I set the async action somewhere bellow 100ms, console.log is showed only once with state already set, and I think this is something related to react async rendering.

[Andrekra]

@markerikson Here's an example https://codesandbox.io/s/v629pkllj0

[MrWolfZ]

@markerikson I haven't debugged this yet, but just going from the code could the issue be in this line?

I think what might be happening is that the useLayoutEffect is called before the cleanup function of the nested component's store subscription effect is called, i,e. the nested subscriber is notified before the containing component is properly unmounted.

[MrWolfZ]

Alright, notifyNestedSubs is definitely called before the child is unmounted. Here's a test case that shows this. For some reason completely unclear to me this test will actually succeed if the first INC is dispatched inside rtl.act. It seems there is definitely some ordering issue between the effects based on how they are set up.

Also, this test succeeds if we render the child from the start and only hide it. It has to be first hidden, then shown, then hidden again. Therefore I think this is what is happening:

• the parent is rendered and the effects are registered
• the store gets updated
• the child is now getting rendered and the effect (and its cleanup) are registered
• the store gets updated
• since the parent was in the DOM without the child, it's effects are called first before the child is unmounted

I don't know if this is a react issue to be honest, since it feels like this should not happen.

it('should not notify nested components after they are unmounted', () => {
  @connect(state => ({ count: state }))
  class Parent extends Component {
    render() {
      return this.props.count === 1 ? <Child /> : null
    }
  }

  const mapStateToProps = jest.fn(state => ({ count: state }))
  @connect(mapStateToProps)
  class Child extends Component {
    render() {
      return <div>{this.props.count}</div>
    }
  }

  const store = createStore((state = 0, action) =>
    action.type === 'INC' ? state + 1 : state
  )
  rtl.render(
    <ProviderMock store={store}>
      <Parent />
    </ProviderMock>
  )

  expect(mapStateToProps).toHaveBeenCalledTimes(0)
  store.dispatch({ type: 'INC' }) // works with this: rtl.act(() => { store.dispatch({ type: 'INC' }) })
  expect(mapStateToProps).toHaveBeenCalledTimes(1)
  store.dispatch({ type: 'INC' })
  expect(mapStateToProps).toHaveBeenCalledTimes(1)
})

[MrWolfZ]

My analysis above was wrong.

Scratch all of the above. It is actually a different timing issue. The problem is that the store subscription is created inside useEffect. In the sandbox from @Andrekra (and the test above) the dispatches are done immediately after another without giving react a chance to execute effects. That means the the order of events is this:

• the parent is rendered and the store is subscribed to
• the store gets updated
• the child is now getting rendered and the store subscription effect is queued up
• the store gets updated again
• the parent gets updated and hides the child
• the update on the child forces the queued store subscription effect of the child to be executed (which calls checkForUpdates immediately and with the latest state that has the second update already applied)
• the child store subscription effect gets immediately cleaned up

You can see in this sandbox how this happens with just plain react. The second toggling render is printed before the child is mounted for the first time.

The proper fix (that passes all tests including the one I posted above) is to use useIsomorphicLayoutEffect for setting up the store subscription. I have created a PR for this. I don't see another way of solving this since when the store subscription effect is executed it is impossible to know whether the component was already queued to be unmounted.

[markerikson]

Yeah, I wondered whether having the store subscription in an async effect was going to cause issues.

[justincrow]

We are also experiencing the same issue with 7.0.2. I've tried to re-create with a minimal example in codesandbox, but I cannot get the same error. I'll keep trying.
Please can this be re-opened?

[MrWolfZ]

Do any of you that experience this issue use concurrent mode?

@justincrow do you have exactly the same issue, i.e. a non-rendered component's mapState is called? I want to clarify whether this is still a timing issue with unmounting components or something different.

[unrevised6419]

Do any of you that experience this issue use concurrent mode?

No

With new patch release I still encounter the issue. And the problem it seems to be as I said above

At first render AppImpl.props.myObject is undefined and TheConsumer.props.render function catches it into scope.

[justincrow]

Hi @MrWolfZ ,
Yes, exactly the same issue.
We don't use concurrent mode (that I'm aware of).
mapState is called on a non-rendered component.
I'll try to find some more time to re-create it in the smallest form (our app has deep nesting).
Many thanks.