URL Params as State in React (Complete Tutorial)

[@nmanikiran]

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]

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

[@artursavchuk2363]

Thank you for your videos, you are the best teacher I have ever seen on KZbin

[@ВячеславБезушко]

Nice and clean approach!

[@AfonsoMaia-u1f]

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.

[@entrinsek9230]

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]

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]

Thank you Cosden!

[@mohamedsalimbensalem6118]

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

[@CLeovison]

Cosdeeeen. Thankyouuu so muuch for thiis 😭😭

[@jordan.trahanov]

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

[@david-Jik4l]

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

[@MattElisa97]

Nice your videos are awesome !

[@nourmustafa5094]

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

[@noorulamin2652]

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

[@Farruh_13]

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]

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

[@youhabbo01]

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

[@cosdensolutions]

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

[@zafer9164]

Before watching, great video

[@basiccode-fd6xz]

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

[@motivationcolonel]

u are great love from pakistan

[@castush]

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

[@kokosteo]

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

[@big-jo89]

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?

[@you-never-know9113]

Would’ve been nice to see the debounce implementation

[@josephito27]

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]

I have a video on it!

[@shariful12905]

Thank you My Friend

[@ardianhotii]

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

[@richardhaughton9633]

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

[@KrelleTG]

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]

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

[@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");

[@Kevin-kd3rf]

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]

Can validate in the setFilters function 11:10

[@doBobro]

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.

[@LehmannMr]

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

[@julienjoseph-agathe7447]

Urlencode

[@LehmannMr]

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

[@sumanthprabhu11]

Is your course Project React video based?

[@cosdensolutions]

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!

[@LehmannMr]

The nuqs library seems to take this even a step further

[@LehmannMr]

Love your videos

[@indofiz1077]

Just like PHP back day

[@Seacrest.]

alright cool

[@drrandom1259]

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