URL Params as State in React (Complete Tutorial)

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

КОМЕНТАРІ • 49

  • @nmanikiran
    @nmanikiran 4 місяці тому +13

    Nice and clean explanation.
    Note: Max 2048 chars browser url supports
    Part 2 with -
    1) How to handle multiple values (multi select, checkbox values)
    2) Special character consideration
    3) range filters etc..

  • @gauravbawa5609
    @gauravbawa5609 4 місяці тому +2

    It was always the best thing in my life to always learn how to write clean code

  • @artursavchuk2363
    @artursavchuk2363 3 місяці тому

    Thank you for your videos, you are the best teacher I have ever seen on UA-cam

  • @ВячеславБезушко
    @ВячеславБезушко 4 місяці тому +3

    Nice and clean approach!

  • @entrinsek9230
    @entrinsek9230 4 місяці тому

    As promised i had registered in react project ! I confess that is a game changer still trying to understand deeply what you said and repeating the first and second chapters to memorize the logic and get it flexible in my head to use it frequently in easy way, the only course i had purchased and it matters

    • @cosdensolutions
      @cosdensolutions  4 місяці тому +1

      Happy to hear that! You're taking a great approach. Take your time, learn it properly and you'll learn everything there is to know about React 😄

  • @ZekeSyl
    @ZekeSyl 4 місяці тому +2

    Thank you Cosden!

  • @AfonsoMaia-u1f
    @AfonsoMaia-u1f 4 місяці тому +3

    Found your channel recently and its one of the best coding channels I've seen so far, keep up the good work.
    A feedback for improvement would be to pace your videos a little more, It seems a bit too rushed. Your voice tone and volume is constant, together with the speed at witch you deliver the content, it makes it quite hard to watch long sessions of back to back videos. After one or two videos I usually get sleepy and its quite difficult to maintain focus, so i usually just take a break, to get out of that sleepy state and come back later. Slowing down your speech a little bit to seem more like a conversation than a fast paced lecture would be nice.
    Aside from that you are covering really interesting topics that are hard to find on other channels, really enjoyed the video.

  • @MattElisa97
    @MattElisa97 4 місяці тому

    Nice your videos are awesome !

  • @CLeovison
    @CLeovison 4 місяці тому

    Cosdeeeen. Thankyouuu so muuch for thiis 😭😭

  • @mohamedsalimbensalem6118
    @mohamedsalimbensalem6118 4 місяці тому

    thank you so much, just it time! iam going to use this on my project because i was using redux for filters

  • @zafer9164
    @zafer9164 4 місяці тому

    Before watching, great video

    • @basiccode-fd6xz
      @basiccode-fd6xz 4 місяці тому

      Same here. I feel like he is going to get me places

  • @shariful12905
    @shariful12905 4 місяці тому

    Thank you My Friend

  • @motivationcolonel
    @motivationcolonel 4 місяці тому

    u are great love from pakistan

  • @david-Jik4l
    @david-Jik4l 2 місяці тому

    Hi, thanks for the clear explanation. I see some people encoding the uri component, what is the reason for doing that?

  • @kokosteo
    @kokosteo 3 місяці тому

    Can you make a video with what shortcuts do you use when writing code?

  • @nourmustafa5094
    @nourmustafa5094 4 місяці тому

    Great topic ❤,
    What theme are you using for the editor ?

  • @castush
    @castush 2 місяці тому

    Thank you so much for this video. It is well explained. Could you please help us understand sever-side pagination using url params, tanstack, shadcn/ui table

  • @noorulamin2652
    @noorulamin2652 4 місяці тому +1

    How can we sanitize and validate the search params before sending them to the backend?

  • @you-never-know9113
    @you-never-know9113 4 місяці тому +1

    Would’ve been nice to see the debounce implementation

    • @josephito27
      @josephito27 4 місяці тому

      it's not that difficult tbh, it has a useState and useEffect inside with a setTimeout, you can google the snippet and understand it easily

    • @cosdensolutions
      @cosdensolutions  4 місяці тому

      I have a video on it!

  • @richardhaughton9633
    @richardhaughton9633 4 місяці тому

    Thanks for the video. How would this work with tanstack router?

  • @jordan.trahanov
    @jordan.trahanov 2 місяці тому

    why not debounce the onChange setFilters on the search field directly instead of another local state?

  • @ardianhotii
    @ardianhotii 4 місяці тому

    Very nice video , I wanna see how to use the URL as state in a nextjs app with server components where the data fetch happens in the server components and the search "form" is in a client component , the main issue is (or I don't know yet ) how to reftech the data with the new search value or it does automatically when the URL changes

  • @Farruh_13
    @Farruh_13 4 місяці тому +11

    Why do you almost always publish a video at the same time as Web Dev Simplified does? I've noticed this so many times

    • @NabeelGm
      @NabeelGm 4 місяці тому

      Maybe because of the Algorithm, His video should pop up in related videos and vice versa

    • @youhabbo01
      @youhabbo01 4 місяці тому +1

      How can the algorithm know when they both will post? lol

    • @cosdensolutions
      @cosdensolutions  4 місяці тому +8

      really? I had no idea haha. I post Tuesdays and Fridays generally 😁

  • @Kevin-kd3rf
    @Kevin-kd3rf 4 місяці тому

    What about params validation? Setting the URL as source of truth makes perfect sense, but it also allows any user to manipulate it at will. What if a user edits the search params to a different value? Do you check it? Do you reset to a default value? Do you show an Error? What if they change the category to something that is not of type ProductFilters["category"], BUT is still valid as a query on the backend (like a different category that you didn't want to be selectable in the UI)?

    • @m_hammad17
      @m_hammad17 4 місяці тому

      Can validate in the setFilters function 11:10

    • @doBobro
      @doBobro 22 дні тому

      If users change url they know what they do. Simply do nothing is the best solution. You validation code 99% would prevent legitimate use-cases from a user perspective. If you afraid to bring state to the url by reason "it could be dangerous" then do not afraid. Apps without ability to share url is a most moronic action from FE devs. Second moronic is prevent links opened by middle click.

  • @big-jo89
    @big-jo89 3 місяці тому

    One of my biggest issues dealing with searchParams in Next.js is how to avoid prop drilling and come up with a global solution that provide the searchParams values to any nested server component that uses them.
    I tried using a cookie and synchronize its value in the client components with the current searchParams extracted from the useSearchParams hook, and it worked fine in dev mode and after local build, however, it was a mess in production (Vercel) idk why but it just wasn't working as expected, so I had to roll back to prop drilling.
    my question is how do you work around this issue or do you just stick with passing the search params to the nested server components?

  • @LehmannMr
    @LehmannMr 4 місяці тому

    Does this also work if one of the filter strings contains a hash sign or is some additional encoding needed.

    • @julienjoseph-agathe7447
      @julienjoseph-agathe7447 4 місяці тому +1

      Urlencode

    • @LehmannMr
      @LehmannMr 4 місяці тому

      @@julienjoseph-agathe7447 I just wanted to mention that one probably has to care about it. Otherwise the url will be messed up

  • @LehmannMr
    @LehmannMr 4 місяці тому +1

    The nuqs library seems to take this even a step further

    • @LehmannMr
      @LehmannMr 4 місяці тому

      Love your videos

  • @indofiz1077
    @indofiz1077 4 місяці тому

    Just like PHP back day

  • @KrelleTG
    @KrelleTG 3 місяці тому

    When using this method and refreshing the page, the useEffect hook will add "?search" to your url without you have written anything in it. Is it possible to avoid this?

    • @muhammedbojang5495
      @muhammedbojang5495 2 місяці тому

      use the uselocation() .search as the filter. the ?search will con as default

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

      hey, i'm kinda late. but whenever this happens, i try checking if the length of the search string is zero. if it is, then you can remove it with params.delete("search");

  • @Seacrest.
    @Seacrest. 4 місяці тому

    alright cool

  • @sumanthprabhu11
    @sumanthprabhu11 4 місяці тому

    Is your course Project React video based?

    • @cosdensolutions
      @cosdensolutions  4 місяці тому

      yeah totally. 80+ videos, but you also get a whole custom app that you build and work in, and the videos guide you step by step!

  • @drrandom1259
    @drrandom1259 3 місяці тому

    Unfortunatelly there a lot of things missing. Instead of a refactoring video, this would have been better from the ground up. You have to do urlencode/decode to make it reliable and you need to mention that you must sanitize the inputs, etc...etc... Great video as always ofc, but this is not enough to put state in the url safely and correctly