search

47ng / nuqs

Type-safe search params state manager for React frameworks - Like useState, but stored in the URL query string.
https://nuqs.47ng.com
MIT License
4.86k stars 104 forks source link

style: Use useSyncExternalStore in the React adapter #723

Open bartlangelaan opened 3 weeks ago

bartlangelaan commented 3 weeks ago

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[bot] commented 3 weeks ago

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

A member of the Team first needs to authorize it.

franky47 commented 3 weeks ago

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[bot] commented 3 weeks ago

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 commented 3 weeks ago

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

franky47 commented 3 weeks ago

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[bot] commented 3 weeks ago

Open in Stackblitz

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

commit: 6b2e0a2

franky47 commented 1 week ago

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

bartlangelaan commented 1 week ago

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