Easy-peasy: react: state mapper and render are called with stale props

[MrWolfZ]

Hi,

not sure if you are following the discussions about the official react-redux hooks, but one major issue we are trying to solve there is what has been called the "zombie child problem". Basically, it means that the selector in useStore and worst case even the render of the component happens with an inconsistent store and props. Sadly, your library suffers from the same issue with both cases happening, i.e. useStore and the render are executed with inconsistent state and props. You can see an example that causes a crash here and another example that logs what is happening to the console more clearly here.

[ctrlplusb]

Thanks for reporting this @MrWolfZ - I really appreciate the time you took to create a reproducible example for me.

I have given this some thought and I believe I _may_ have a solution that will work in the context of easy-peasy. I will let you know if and when I have a demoable solution, and if it works I sincerely hope we can take the ideas over to the official react-redux hooks. 👍

[ctrlplusb]

@MrWolfZ my initial naive implementation appears to be work in principle, however, it needs more work.

https://codesandbox.io/s/pm39mzn13m

[MrWolfZ]

@ctrlplusb there is an error a warning printed to the console when I hit the "Delete B" button.

Also, I can't find the branch with your 2.2.0-alpha.1 version. Have you pushed it here? I'd like to see the changes you made to fix the issue.

[ctrlplusb]

@MrWolfZ yeah, it's still a work in progress. I'll ping you the branch when I have something semi-decent to push up. Very POC at this stage.

[ctrlplusb]

Ok, seems like the warning has gone away with latest effort...

[ctrlplusb]

@MrWolfZ see #137

[MrWolfZ]

@ctrlplusb That code still has some issues. On the surface, this seems to work, but in reality a hidden error is thrown in the event handler. I refactored the example a little bit to make it clearer what is happening.

[ctrlplusb]

Thanks for that 👍

[ctrlplusb]

@MrWolfZ thanks for giving me a deeper insight into this problem. I am looking at a temporary solution to this where the mapState error is caught, and I then allow a window of opportunity where a new registration is started (i.e. props updated) or the component unmounts. If none of these cases occur I then throw the error.

It's not working right now, but could possibly be a temporary workaround.

https://github.com/ctrlplusb/easy-peasy/pull/138

Hoping to explore this direction a bit more whilst doing more research and tracking the conversation with react-redux 👍

[ctrlplusb]

Ok, workaround is "working.

https://codesandbox.io/s/p3nywxx37q

Needs more robust testing though.

[ctrlplusb]

Fixed by #138