kirill-konshin/next-redux-wrapper

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:

  1. Go to https://nrw.vercel.app/foo
  2. Open Chrome Redux Devtools, and check the Diff for the Redux actions that got dispatched.
  3. 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

Screenshot 2022-10-28 at 15 29 59

Screenshot 2022-10-28 at 15 30 03

Screenshot 2022-10-28 at 15 30 07

Screenshot 2022-10-28 at 15 30 12

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 🤷‍♂️

Screenshot 2022-10-28 at 15 35 43