The Better Way to Manage React State

Поділитися
Вставка
  • Опубліковано 24 гру 2024

КОМЕНТАРІ • 169

  • @franky47
    @franky47 Місяць тому +239

    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.

    • @ahmedhassan_saver
      @ahmedhassan_saver Місяць тому +7

      When he typed withDefault("josh") - Why didn't the url start with name=josh ?? - it should have started with this, right? 4:59

    • @kennedymungai1
      @kennedymungai1 Місяць тому +1

      Cool package bro

    • @ahmedhassan_saver
      @ahmedhassan_saver Місяць тому +1

      And i think u should add some type if configuration to determine whether delete false param or not to delete falsy params but not the 0 value , so if the param is name= it should be removed entirely may be this should be in the third param or something or the second param should be object that has key for default value and another key for this -- i can contribute and do this if u like and if it doesn't already exist because i didn't try it

    • @franky47
      @franky47 Місяць тому

      ​@@ahmedhassan_saver This is the `clearOnDefault` behaviour/option: when the state is set to the default value (here "josh"), it's not reflected in the URL to save space (remember URLs have limited size). If the default had been an empty string (which is more common), then you'd get no search params when clearing the input, which feels more natural.

    • @sK4hsCz
      @sK4hsCz Місяць тому

      @@ahmedhassan_saver First I have to give my two cents, then say directly what is wrong and finally admit that I haven't even looked at the code. Just WOW, dude! xD
      @franky47 I knew it ^^ start testing right away

  • @FunctionGermany
    @FunctionGermany Місяць тому +17

    if you're using react-router or tanstack router, you want to use their URL+state features instead of another library.

    • @paw565
      @paw565 Місяць тому

      It's primary for next js I think

    • @franky47
      @franky47 Місяць тому

      ​@@paw565 Not anymore, since v2 you can use it with Remix, React Router and plain old React SPA (in addition to Next 14 & 15).
      For React Router, nuqs adds type-safety and declarative scoping to search params on top of the built-in useSearchParams hook.
      If you are using TanStack Router, you don't need nuqs, it's already got the good stuff baked-in.

  • @killswitch.
    @killswitch. Місяць тому +2

    2:16 This "In-Memory" term has been living in my head rent-free for so long. Thanks boss, I just freed up some space.

  • @Hugos68
    @Hugos68 Місяць тому +98

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

    • @simonhartley9158
      @simonhartley9158 Місяць тому +1

      I think it's a baby with the bathwater scenario. People tried all URL state, then no URL state and now settling on a mix.

    • @PraiseYeezus
      @PraiseYeezus Місяць тому +8

      it's not being "rediscovered" it's being adapted to eliminate the trade offs that it used to have (another request to the server, stale values, etc)

    • @debarkamondal6406
      @debarkamondal6406 Місяць тому +1

      exactly write a function yourself. Once you get the hang of it its easy. I don't understand it existing as a separate library.

    • @ianik-br
      @ianik-br Місяць тому

      Every 20 years many products, services and functions are relaunched for the new generations like "new discoveries"

    • @debarkamondal6406
      @debarkamondal6406 Місяць тому

      @@ianik-br the main point is. You can install and read documentation to work with another library and make client heavy instead of using things already provided. It's not that hard either

  • @mahmoudwalid1703
    @mahmoudwalid1703 Місяць тому +7

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

  • @makerKID5
    @makerKID5 Місяць тому +1

    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.

  • @essayvlog
    @essayvlog Місяць тому +1

    Thanks for letting us know the amazing library

  • @devkasunlakshitha
    @devkasunlakshitha Місяць тому +4

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

  • @saissevictor
    @saissevictor Місяць тому +2

    checked this in the midday repo, amazing work from frank

    • @franky47
      @franky47 Місяць тому +2

      Thank you!

  • @ErmandDurro
    @ErmandDurro Місяць тому +2

    Wow so cool. Thank you Josh for showing this 😃

  • @floooooo33
    @floooooo33 Місяць тому

    every 3 month, there's new react state management package that's super useful

  • @childe2001
    @childe2001 Місяць тому +2

    Thanks for the explanation!

  • @virtual5754
    @virtual5754 Місяць тому +3

    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?

  • @aliarefjs
    @aliarefjs Місяць тому +1

    Life saver video, Josh! Thanks a ton!!

  • @codernerd7076
    @codernerd7076 Місяць тому +5

    Oh it's November, and a new react state management is out, don't use this one for any sensitive data...😅

    • @joostschuur
      @joostschuur Місяць тому

      nuqs (the topic of this video) has been out for over 4 years and has close to 5k stars on GitHub. 2.0 just came out.

  • @gobeksalata
    @gobeksalata Місяць тому

    the first example would pollute the window.history real quick, best way is to store them after a form submit or saving state with debouncing.

    • @DJDrewDub
      @DJDrewDub Місяць тому

      I mean you could remove the previous history at the same time as setting the current, I'd hope the author thought of this.

    • @franky47
      @franky47 Місяць тому

      @@DJDrewDub That's the default behaviour. You opt-in to pushing new entries on the history stack with the history: push option. (beware of breaking the Back button, great powers = great responsibilities).

    • @tipsyterry
      @tipsyterry Місяць тому

      ​@@franky47 can the library be used in plain react projects? that's what the video seems to imply

  • @Paul_Marek
    @Paul_Marek Місяць тому +2

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

  • @debarkamondal6406
    @debarkamondal6406 Місяць тому +1

    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.

    • @akashambrose
      @akashambrose Місяць тому +1

      Exactly what I thought.

    • @paw565
      @paw565 Місяць тому

      Benefit of having a library like that is the biggest when you work in a team imo. You get ready set of tools, which is documented. It's easier for collaboration and for newcomers into the project. When you work solo simple util function might enough.

    • @debarkamondal6406
      @debarkamondal6406 Місяць тому

      I don't think syncing a state variable with URL is that hard. Its just 2 liner. Unless this library does anything more than that

    • @paw565
      @paw565 Місяць тому

      @@debarkamondal6406 it gives you typesafety, you can with ease put entire object state into the url.

    • @franky47
      @franky47 Місяць тому +2

      ​@@debarkamondal6406 Browsers are strange creatures with many quirks. Making something that works 50% of the time is quick. Supporting a wide range of use-cases properly and reliably takes considerably more time and care. You likely don't want to do & maintain this yourself on every project.

  • @mzafarr
    @mzafarr Місяць тому

    Such short videos are really useful

  • @ashimov1970
    @ashimov1970 Місяць тому

    Cool. But what about encrypting the state within a URL?

  • @gvsakhil143
    @gvsakhil143 Місяць тому +1

    Its very useful, thanks a lot dude

  • @LlamaPony
    @LlamaPony Місяць тому +1

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

    • @LlamaPony
      @LlamaPony Місяць тому +1

      or probably easier

  • @MichaelLo-i5v
    @MichaelLo-i5v Місяць тому +2

    I would like to ask, in the ray.so snapshot app, doesn’t the URL have a maximum length?
    If the number of codes is large today, wouldn't it cause bugs?
    Is there anything wrong with my understanding?
    Or did he actually use other techniques to solve it?

    • @harshitpant07
      @harshitpant07 Місяць тому +1

      2 things
      - either they have set a limit to the amount of characters you can insert
      - they hash it or reduce the size (less possibility)

  • @basheerridwanmuhammad6612
    @basheerridwanmuhammad6612 Місяць тому

    This feature is already in RemixJS

  • @The.Meshhh
    @The.Meshhh Місяць тому

    Wondering what tthe example Use -Cases for this might be

  • @paw565
    @paw565 Місяць тому +1

    That's actually epic! ❤

  • @victorm3193
    @victorm3193 Місяць тому

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

  • @SumanKumar-nl9dm
    @SumanKumar-nl9dm Місяць тому

    The video is very similar to the sam selikoff's video on " How to share React component with the URL".

  • @ChiefORZ92
    @ChiefORZ92 Місяць тому

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

    • @franky47
      @franky47 Місяць тому

      Would you mind opening an issue for this please? repo is 47ng/nuqs.

  • @abdullahisalihu8107
    @abdullahisalihu8107 Місяць тому +1

    This is game changing

  • @jeromedeng2372
    @jeromedeng2372 Місяць тому

    Is there a better way to do this in nextjs?

  • @curiousprogrammer90
    @curiousprogrammer90 Місяць тому +1

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

    • @franky47
      @franky47 Місяць тому +3

      It depends on the framework (Next.js, Remix, React Router & plain React are supported). In Next.js, it's a client-side update by default (shallow: true, using the History API), but you can opt-in to notify the server for SSR using `shallow: false`, which does call the router.

    • @paw565
      @paw565 Місяць тому +2

      ​@@franky47bro you are legend. You have created this awesome library and now you are actively answering questions. Cheers!

    • @franky47
      @franky47 Місяць тому +1

      @@paw565 Founder mode.

  • @Noam-Bahar
    @Noam-Bahar Місяць тому +1

    The package is called nuqs

  • @bioburden
    @bioburden Місяць тому +1

    Could be nice to pair with React Query too

    • @franky47
      @franky47 Місяць тому

      It is! And TanStack Table too.

  • @nklpn
    @nklpn Місяць тому

    are those the new starlight airpods? looks great!

  • @webdevdost
    @webdevdost Місяць тому

    shift + alt + 0 removes all unused import statements

    • @RemindMe12
      @RemindMe12 Місяць тому

      or add this in settings.json and it will work in save "editor.codeActionsOnSave": {
      "source.fixAll": "explicit",
      "source.organizeImports": "explicit",
      "source.sortMembers": "explicit"
      },

    • @webdevdost
      @webdevdost Місяць тому

      @RemindMe12 thanks

  • @NilotpaulNandi
    @NilotpaulNandi Місяць тому +2

    Doesn't help much to add an extra dependency, btw react router already has similar kinda hook.

    • @PraiseYeezus
      @PraiseYeezus Місяць тому +2

      so can you write your own code to handle client routing? and all of the edge cases between browsers? and keep it performant? and would it be as battle tested as nuqs?

    • @EIsenah
      @EIsenah Місяць тому

      It's just setting search params bro, chill out@@PraiseYeezus

    • @franky47
      @franky47 Місяць тому +1

      @@PraiseYeezus And type-safe! Type-safety is 50% of the reason behind this package, the other half is the throttling
      mechanism to keep it working when browsers rate-limit history updates.

    • @NilotpaulNandi
      @NilotpaulNandi Місяць тому

      ​@@PraiseYeezus ​I meant this lib doesn't help a lot as personally I'd always make a small hook for updating the search query, etc. Anyway, I never said anything about implementing client routing from scratch.

    • @dexter-dexr
      @dexter-dexr Місяць тому

      ​@@NilotpaulNandi Exactly

  • @Cahnisama
    @Cahnisama Місяць тому

    How does this lib work with other libs like react-router for example? do they overlap?

    • @franky47
      @franky47 Місяць тому

      It works on top of the hooks provided by each router, adding declarative scoping (working with one or a subset of search params) and type-safety, plus facilities to generate links from state variables.

  • @tuankietyts
    @tuankietyts Місяць тому

    I wake up everyday and 1 million of javascript libraries being f*cked

  • @creativecoder-c7n
    @creativecoder-c7n Місяць тому

    Great video ❤

  • @meka4996
    @meka4996 Місяць тому +1

    Amazing! Thanks

  • @dragos.cojocaru
    @dragos.cojocaru Місяць тому +8

    These guys reinvented react router

    • @FunctionGermany
      @FunctionGermany Місяць тому

      not really. connecting URL and state is just one of many features that router libraries or frameworks may support.
      this library just focuses on this one aspect and that's fine. maybe you already have a router you can't change but that doesn't support this feature, then it's useful.

  • @cant_sleeeep
    @cant_sleeeep Місяць тому +1

    just use react query button

  • @Gohealt
    @Gohealt Місяць тому +5

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

  • @umardev500
    @umardev500 Місяць тому

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

  • @parakhjain6077
    @parakhjain6077 Місяць тому

    Comment your this kind of mind blowing libraries..

  • @teenspirit8714
    @teenspirit8714 Місяць тому

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

    • @franky47
      @franky47 Місяць тому

      Tell me more?

  • @siya.abc123
    @siya.abc123 Місяць тому +6

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

    • @dangray5809
      @dangray5809 Місяць тому

      Good call!

    • @franky47
      @franky47 Місяць тому +2

      Debounce support (to do one eventual update of the URL) is on the roadmap. Configurable throttle can give you something similar, though you get one initial update (eg: one character for text inputs) then regular batches, which may or may not work for some states.

    • @anmastery
      @anmastery Місяць тому

      @@franky47 Waiting for the debounce support frank

  • @hugorafaelmc
    @hugorafaelmc 20 днів тому

    This is for "Next.js" and not "React". We need to start separating things.

  • @mdshamirulislam2262
    @mdshamirulislam2262 Місяць тому

    great

  • @tomcat1112k
    @tomcat1112k Місяць тому

    YO! subscribed

  • @lingarajsahoo3583
    @lingarajsahoo3583 Місяць тому +1

    cool

  • @DJDrewDub
    @DJDrewDub Місяць тому

    Neat idea but not practical for real use since urls have fairly short limits, even at base 64 a moderately complex form would overflow that limit. That and imagine sharing a url via email and the link is a giant block of code you have to scroll the page to see.

    • @franky47
      @franky47 Місяць тому

      You wouldn't want to store absolutely all state in the URL. Only relevant pieces of what the app needs to configure its data & presentation. The rest can come from the server or stay in-memory if it doesn't need sharing or persistence.

  • @dejoma.
    @dejoma. Місяць тому +1

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

  • @ningshenbj
    @ningshenbj Місяць тому

    i use zustand😁

  • @akoladebode-ajayi327
    @akoladebode-ajayi327 Місяць тому +1

    Wow

  • @itsaysthat2502
    @itsaysthat2502 Місяць тому

    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

  • @salihyil2
    @salihyil2 Місяць тому +1

    npm i nuqs

  • @AbhiShake-pl3cf
    @AbhiShake-pl3cf Місяць тому

    Misleading title..

    • @AbhiShake-pl3cf
      @AbhiShake-pl3cf Місяць тому +1

      Sorry, im stupid. They do have parseAsJson and parseAsArrayOf. And i loved their adapters usage

    • @franky47
      @franky47 Місяць тому +1

      @@AbhiShake-pl3cf You can create your own parsers too, JSON is good to start but looks ugly in the URL. Kind reminder that URLs are the first UI your users will see, even before hitting your server. Better make them look nice.

    • @AbhiShake-pl3cf
      @AbhiShake-pl3cf Місяць тому

      @franky47 most browsers hide search params so i wouldnt mind. Objects look ugly when shared but base64 representation looks fine to me

    • @AbhiShake-pl3cf
      @AbhiShake-pl3cf Місяць тому +1

      @@franky47 woah i cant believe the author reads these comments. I agree that it looks ugly (most browsers hide query params from url but its there when shared). How slow would converting them to b64 for url param and backconverting in every setState call be?

    • @franky47
      @franky47 Місяць тому

      If you do this in a custom parser, it would be optimised: the serialise/parse functions are only called when there are actual changes. Couple that with throttleMs to reduce the update rate of the URL. For larger payloads, you could even throw compression + encoding in the mix.

  • @48265868
    @48265868 Місяць тому +1

    So many things wrong with this vid... Who would ever use a third party Lib to use the query params in the URL? Also this is how it have always been done? There is nothing new? State was always ment to be kept in the URL... The react dev have really came to a full circle of life now.

  • @adamtang5148
    @adamtang5148 Місяць тому

    What the...

  • @raves_r3177
    @raves_r3177 Місяць тому

    or just use tanstack router

    • @paw565
      @paw565 Місяць тому

      Not in next js bro

  • @gffilm
    @gffilm Місяць тому

    I would not recommend this approach for a prod app. Security is a big issue here, also many ways of retaining data without using URL params.

    • @franky47
      @franky47 Місяць тому

      One of the points raised recently was redirects: /auth/login?redirect=/dashboard, which can lead to open-redirect vulns. I'll make a community parser for this, which validates the path starts with /

  • @Skorupa9
    @Skorupa9 Місяць тому

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

  • @AbouAnia
    @AbouAnia Місяць тому

    Php again

  • @joostschuur
    @joostschuur Місяць тому +8

    It's 'nuqs' BTW. Pretty frustrating to not mention the npm package name anywhere in the video description.

    • @dqrk0
      @dqrk0 Місяць тому +2

      1:10

    • @harshitpant07
      @harshitpant07 Місяць тому +4

      He literally spell it at 1:30

    • @PraiseYeezus
      @PraiseYeezus Місяць тому +3

      the internet really is full of bots. no one reads, no one actually watches content, they just comment. incredible.

    • @benjaspet
      @benjaspet Місяць тому +1

      Posting this comment without actually watching a minute and a half into the video is wild!

    • @bigbrain720
      @bigbrain720 Місяць тому

      bro it's literally in the thumbnail

  • @Nishitbaria
    @Nishitbaria Місяць тому

    3

  • @EmmaLovesCoding
    @EmmaLovesCoding Місяць тому

    6

  • @devlala4365
    @devlala4365 Місяць тому

    1

  • @prashlovessamosa
    @prashlovessamosa Місяць тому

    2

  • @DanZ-fq2qs
    @DanZ-fq2qs Місяць тому

    try this? NO

  • @akoladebode-ajayi327
    @akoladebode-ajayi327 Місяць тому +1

    React came as a happy framework but with many problems and now we are using hundreds of external libraries to fix React 😅

  • @akoladebode-ajayi327
    @akoladebode-ajayi327 Місяць тому +1

    Gid bless you sir😊

  • @ts8960
    @ts8960 Місяць тому

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

    • @youarethecssformyhtml
      @youarethecssformyhtml Місяць тому

      When app shares state between components, you'll need a way to manage state efficiently. That's why.
      But yeah for most projects, it's unnecessary.

  • @guillemgarcia3630
    @guillemgarcia3630 Місяць тому

    so, a wrapper around window.history.replaceState?

  • @Divyv520
    @Divyv520 Місяць тому

    Hey josh , awesome video! Your unique style really stands out. I'm a video editing specialist focused on UA-cam growth, and I can help enhance your content with high-quality edits and engaging thumbnails. If you're ever open to exploring new ideas or strategies that can boost your channel further, I'd love to connect and see how we can collaborate. Let me know your thoughts

  • @Damilare700
    @Damilare700 Місяць тому +1

    Wow