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.

Sign up for GitHub

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

Jump to bottom

Too many hydrate actions get dispatched #496

Closed
karaoak opened this issue Oct 28, 2022 · 1 comment
Closed

Too many hydrate actions get dispatched #496

karaoak opened this issue Oct 28, 2022 · 1 comment
Labels
bug

Comments

@karaoak
Copy link

karaoak commented Oct 28, 2022 •
edited

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
@karaoak karaoak added the bug label Oct 28, 2022
@karaoak karaoak mentioned this issue Oct 31, 2022
Closed
kirill-konshin added a commit that referenced this issue Nov 1, 2022
@kirill-konshin
Fix #493 #495 #496
be23ed3
This was referenced Nov 2, 2022
Closed
Merged
@gudvinga gudvinga mentioned this issue Nov 16, 2022
Open
@He1DAr He1DAr mentioned this issue Dec 2, 2022
Merged
@kirill-konshin kirill-konshin mentioned this issue Dec 15, 2022
Merged
kirill-konshin added a commit that referenced this issue Dec 28, 2022
@kirill-konshin @voinik
Use useMemo for hydration and avoid unnecessary hydrates (#510)
8e098f7 
* Use useMemo for hydration and avoid unnecessary hydrates (#502)

* Upgrade packages and refactor a bit
* Added necessary testing dependency
* Stop hydrating on server and use useLayoutEffect for client hydration
* Added pokemon page with rtk's createApi
* Added back dispatch in GSP in demo repo
* A change in query params constitutes a new page now
* Improve performance by using another hook on server
* Add detail page
* New approach: split gsp and gssp and hydrate based on those
* Added a second type of initial state handling with more explanations
* Improved useMemo comment
* Make sure hydrates work when staying on the same page
* Add links to demo repo to test issue (seems like no issue)
* Proper gipp fix (#512)
* ESLint fix
* Gipp testcase and example page in RTK repo (#514)
* Add GIP to _app and add GIP in page to RTK repo
* Added e2e test for RTK repo
* Added testcase for GIAP and GIPP to wrapper
* Consistent casing and formatting in comments

Fix #493 #495 #496

Co-authored-by: voinik <victor_panteleev@hotmail.com>
@kirill-konshin
Copy link
Owner

https://github.com/kirill-konshin/next-redux-wrapper/releases/tag/8.1.0

@OKEAMAH OKEAMAH mentioned this issue May 26, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kirill-konshin @karaoak