The Better Way to Manage React State

SHITTY. guys use zustand

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

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

The package is called nuqs

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

npm i nuqs

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

YO! subscribed

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.

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.

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

just use react query button

so, a wrapper around window.history.replaceState?

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

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

Yo!

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

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

Misleading title..

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

These guys reinvented react router

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.

are those the new starlight airpods? looks great!

Php again

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

checked this in the midday repo, amazing work from frank

Could be nice to pair with React Query too

Wow so cool. Thank you Josh for showing this 😃

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

try this? NO

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.

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

Wondering what tthe example Use -Cases for this might be

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.

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

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

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?

Such short videos are really useful

or just use tanstack router

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...

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.

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

cool

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

Thanks for letting us know the amazing library

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

Wow

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

Its very useful, thanks a lot dude

looks like useSearchParams but more simple 🤔