style: Use useSyncExternalStore in the React adapter

[bartlangelaan]

This utilizes the useSyncExternalStore hook in the React adapter, which automatically takes care of rehydration errors.

I'm unsure if it still works correctly, because this version does not use the emitter value anymore. It just gets it from the location every time. I will test it before marking it as ready.

[vercel]

@bartlangelaan is attempting to deploy a commit to the 47ng Team on Vercel.

A member of the Team first needs to authorize it.

[franky47]

Thanks, wow this is so much cleaner!

I had heard of useSyncExternalStore, but it didn't occur to me to use it here, it sounds like a perfect use-case. Great job!

[vercel]

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	Oct 30, 2024 10:57pm

[bartlangelaan]

I don't have time to test it today, so if you can't wait and want to test it, feel free! :-)

[franky47]

Regarding the emitter, it's use is to make sure the searchParams returned by the adapter hook is reactive: when the URL changes, no matter the reason (internal query state change, Link, back/fwd navigation), every hook needs to get the new value.

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/nuqs@723

commit: 6b2e0a2

[franky47]

Hey, do you have some bandwidth to work on this again, or do you mind if I pick it up?

[bartlangelaan]

I don't mind at all! I don't know when I will have time for this, so feel free!

[Copilot]

Copilot reviewed 1 out of 1 changed files in this pull request and generated no suggestions.

Comments skipped due to low confidence (1)

packages/nuqs/src/adapters/react.ts:7

• Changing the emitter type from { update: URLSearchParams } to { update: void } might cause issues if other parts of the codebase rely on the update event carrying a URLSearchParams payload.

const emitter = mitt<{ update: void }>()

[franky47]

Closing this as we do use uSES for the optimistic state in core now, although we might migrate away from it to prefer useOptimistic when we start only supporting React ^19 (probably in nuqs@^3).