Too many hydrate actions get dispatched
karaoak opened this issue · comments
Describe the bug
When in _app.tsx using wrapper.getInitialAppProps and in a page wrapper.getServerSideProps too many hydrate actions get dispatched causing the client component to re-render unnecessary.
- @reduxjs/toolkit: 1.8.6
- next: 13.0.0 (also 12.3.1)
- next-redux-wrapper: 8.0.0
- react: 18.2.0
- react-dom: 18.2.0,
- react-redux: 8.0.4
On one page load 4 __NEXT_REDUX_WRAPPER_HYDRATE__ actions are dispatched in the client store.
To Reproduce
Please see: https://github.com/karaoak/nrw and https://nrw.vercel.app/foo for a working demo (use Chrome Redux Devtools to see what's happening).
Steps to reproduce the behavior:
- Go to https://nrw.vercel.app/foo
- Open Chrome Redux Devtools, and check the Diff for the Redux actions that got dispatched.
- 4 Hydrations took place, while only one or two were expected, (Ideally one!)
Expected behavior
Only one Hydrate action per server request should take place.
Screenshots
Desktop (please complete the following information):
- OS: macOS
- Browser: Chrome
- Version: 106
Additional context
Not using wrapper.getInitialAppProps and only use wrapper.getServerSideProps does not result in this issue.
If enabling in reactStrictMode next.config.js the problem gets worse: 8 hydrate actions get dispatched 🤷♂️
