Too many hydrate actions get dispatched
karaoak opened this issue · 1 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 🤷♂️