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

ref: Use a useEffect rather than useLayoutEffect #828

Merged
merged 1 commit into from
Dec 29, 2024

Conversation

franky47
Copy link
Member

To synchronise the server search params (from stock RR useSearchParams to the internal optimistic search params state).

Using a layout effect gives a warning:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format.
This will lead to a mismatch between the initial, non-hydrated UI and the intended UI.
To avoid this, useLayoutEffect should only be used in components that render exclusively on the client.
See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

Looks like tests are passing fine with a good old useEffect (shallow would be the smoking gun here).

To synchronise the server search params
(from stock RR useSearchParams to the internal
optimistic search params state).

Using a layout effect gives a warning:
```txt
Warning: useLayoutEffect does nothing on the server,
because its effect cannot be encoded into the server
renderer's output format. This will lead to a mismatch
between the initial, non-hydrated UI and the intended UI.
To avoid this, useLayoutEffect should only be used in
components that render exclusively on the client.
See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
```

Looks like tests are passing fine with a good old useEffect
(shallow would be the smoking gun here).
@franky47 franky47 added this to the 🪵 Backlog milestone Dec 28, 2024
Copy link

vercel bot commented Dec 28, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nuqs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 28, 2024 9:08pm

Copy link

pkg-pr-new bot commented Dec 28, 2024

Open in Stackblitz

npm i https://pkg.pr.new/nuqs@828

commit: d9b1ed4

@franky47 franky47 merged commit 3fa04c6 into next Dec 29, 2024
26 checks passed
@franky47 franky47 deleted the ref/react-router-useeffect branch December 29, 2024 06:34
Copy link

github-actions bot commented Jan 1, 2025

🎉 This PR is included in version 2.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@franky47 franky47 mentioned this pull request Jan 3, 2025
@franky47 franky47 removed this from the 🚀 Shipping next milestone Jan 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant