Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link re-renders pure component contents in 4.4.0-beta.4 with redux #6424

Closed
vladshcherbin opened this issue Oct 25, 2018 · 4 comments
Closed

Comments

@vladshcherbin
Copy link
Contributor

vladshcherbin commented Oct 25, 2018

Version

4.4.0-beta.4

Test Case

[1] https://codesandbox.io/s/10kmz6x1q7 [doesn't show bug]
[2] https://codesandbox.io/s/245wk2xwpp [shows bug]
[3] https://codesandbox.io/s/k32w3w0mo3 [no bug in 4.3.1]
[4] https://codesandbox.io/s/6z6l4779n [no bug when no redux]
[5] https://codesandbox.io/s/5xrnv12rpx [no bug when redux wraps router]

Steps to reproduce

Open example [1]

In the example there are 3 routes: /, /one, /two.

All of them render component (RootPageComponent) which is a PureComponent and is rendered using render prop in order to not re-render on page change. This component has a table inside (RootPageComponentTable).

Open console, go from route to route - you will see that both RootPageComponent and RootPageComponentTable render only once and don't re-render on route change.

Now open example [2]

The only difference is that Link component is added to RootPageComponentTable. Open console, go from route to route - you will see RootPageComponentTable is re-rendered on route change.

This doesn't happen if you:

  • use react-router 4.3.1 (example [3]) or
  • remove redux Provider usage (example [4]) or
  • wrap router with redux Provider which is not always possible (example [5])

Expected Behavior

Pure component doesn't re-render contents on every route change when used with render prop and Link component inside, redux Provider is used inside router.

Actual Behavior

Pure component re-renders contents on every route change when Link component is used inside, redux Provider is used inside router.

Since array path support is also added in this version, this is also related to it and needs some kind of solution or fix.

@baronswindle
Copy link
Contributor

I think this is a bug in React itself. facebook/react#13856

@vladshcherbin
Copy link
Contributor Author

@baronswindle oh, so nice you've linked an issue with similar thing, couldn't find anything related myself

I tried to update react-redux to v6 alpha@next#1000 with new context and this bug doesn't exist there - https://codesandbox.io/s/2joljp7kwn 🎉

@baronswindle
Copy link
Contributor

Happy to help, @vladshcherbin!

@vladshcherbin
Copy link
Contributor Author

I think issue can be closed and tracked in linked issues.

Hopefully this will help if someone will try to find about this bug in react-router issues :)

@lock lock bot locked as resolved and limited conversation to collaborators Dec 25, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants