The Better Way to Manage React State

looks like useSearchParams but more simple 🤔

Its very useful, thanks a lot dude

perfect for a QR code system. hey ChatGPT, suggest business ideas using this.

Wow

Really? xD Like you can't just create few lines hook for that? xD

Thanks for letting us know the amazing library

lol setting up query params always been a hassle, this makes it as easy as squeezing a lemon

cool

Yo sir
Make a video on how u started coding from zero and how u got the job.

And btw don't ignore my comment. Else I'll share your details with fbi

I don't understand why is this a library? Should be pretty easy to push things into the URL. On load pull in the the query params and push it to local or global state. For updating write a simple function that pushes the data to both the URL and the state. Why install yet another library for that simple task? I would keep a single source or truth by default and do this sycing only when needed. I don't use anything like redux unless absolutely required. What do you think? I would love your opnion.

I used it two weeks ago on a project, problem is when you try to update multiple values at the same time you will get a race condition and a unsaved state unfortunately...

or just use tanstack router

Such short videos are really useful

Have been using it since next 13. Main benefit of this library is that it allows to abstract updating url without extra requests to server. Next team, are you for real? It has been two years since release of app router, where is native shallow refresh?

You can't do that always. That URL bar has limited character long

Hi Josh. Can you do a deep dive in unit testing Nextjs apps?

Another cool feature you didn’t mention is createSearchParamsCache, which allows you to define a schema and share your search parameters with nested server components.

Wondering what tthe example Use -Cases for this might be

The most horrible thing i faced in react is 'useState'

Josh, I just want to thank you. You're my number #1 source for keeping up to date in this ever changing behemoth we call tech. You're the best. I saw you're video yesterday and I just want you to know how much you're helping others. I'd watch anything you put out.

try this? NO

Bruhhhh I literally coded this myself just a month ago 😂 all that for nothing ahaha even the transition and helper functions “parseIntPrUndefined” kinda things.

Wow so cool. Thank you Josh for showing this 😃

Could be nice to pair with React Query too

checked this in the midday repo, amazing work from frank

someone tell him about preact signals, with can be used in react

Php again

are those the new starlight airpods? looks great!

Thanks Josh! (I'm the author of nuqs). Most people pronounce it "nucks", I pronounce it "nukes" but I'm getting around to it. AMA.

These guys reinvented react router

This package is very useful and time-saving. I will use it in my projects

Misleading title..

I wrote and used the hook and named it useFilter, but this nuqs implementation is much better option. Love it. <3

Yo!

If it changes the url in real time on input, you're gonna need to debounce that!

We're developing backwards if storing state in the URL is rediscovered 😄Great video though!

who the hell needs state management? keep your app simple ffs. Developers always overcomplicating things

so, a wrapper around window.history.replaceState?

just use react query button

How this works under the hood though? Does it do router.replace for every change?

I've been using nuqs for few months now and it has been an absolute blessing to work with. I discovered it just before I had to work on a feature that had to deeplink multiple selected filters on a page and I just saved a bunch of time with this library because I didn't have to implement all this stuff by myself.

Just use tanstack router tbh...

This is cool and all, but the moment you need more complicated state to be stored in URL, or (god forbid) dynamic params, this library will become more of an obstacle than help.

YO! subscribed

How did you get it to create a hash for some of the content that you wanted to make obscured/private in the url?

npm i nuqs

It’s 2024 and we are still seeing state management in react? Jesus!!

The package is called nuqs

or try tanstack router. it's mind-blowing how good it is at this stuff

Brother, Thanks a lot for this! Really cool and useful!

SHITTY. guys use zustand