A note about replace vs push, the Link component takes a `replace` prop that you can set to true (default is false) if you want the replace behaviour. It also has a `scroll` prop that you should set to false (default is true) if you don't want to scroll to the top of the page each time you click on an option.

You are so good at teaching web dev. I love that you show how something can be done with just JS and then proceed to show how a framework like Next.js makes it much simpler! Also, I really appreciate that you cover the edge cases and best practices. I'm learning a lot from watching your videos!

We’ve actually used this technique 4 years ago on a react application, worked great and still does. We’ve also made a search component to listen for changes on the url and update a context. Our app was complex and many components had to be updated so using a context was the way to go. It’s funny though that no matter what we do we always coming back to 00’s concepts. It’s like php back in the days.

This is awesome with server components! Very detailed video that includes URL encoding and search params. Waiting for your nextjs course :D

I stumbled upon your KZfaq channel just today and had to reach out immediately to express my gratitude for the incredible content you’re sharing. Even though it's only been a day, I've already spent hours soaking in your insights. The way you explain concepts is nothing short of amazing 🔥🔥

Such a niche concept and he teaches us for free even though he has paid courses. Kudos my man!!

somehow your teaching method resonates best with me. There are several popular youtubers on JS but you explain why we are doing things with alternatives. Thank you.

This is actually clean and good. Just need to handle the magic strings gracefully and it's perfect. You earned my sub.

Excellent presentation and explanation. Loved the pace of the video, not slow, not fast. Subscribed.🤩

Amazing tutorial man! Never had that idea to use URL parameters not for a search but for products until now, thank you!

Dziękuję bardzo za tutoriale, właśnie kupiłem dwa twoje kursy, niesamowita treść! 🚀👏🎬

This tip saved me a lot of time today! Thank you so much! Eager waiting for your Next.js course!

Thank you for this video - I've watched a lot of tutorials lately that go down the route of useState and useEffect but they never felt like the best way - glad I came across this video!

I found your videos last week and I've seen more than 10 hours of your content. The way you explain things is amazing. Thanks, Wesley! I'm making an e-commerce myself to practice react and next.js, using app router. This solution to avoid using state and making components CC is great! I can't wait for the next js course!! 🥳

An awesome video with great details and explanation, loved it!!! Keep Up the good work

Thanks for the video. I heard of this and needed to see an example of how to go about it and this went above and beyond with even the pitfalls to watch out for.

I love you. You’re an awesome teacher. I’m grateful to have found your channel 🙏🏻

Im very lucky to find your channel on random search.. Tq god for suggesting this gem channel... Tqss dude keep adding more videos 😍👍

Beautiful, it made me smile for a sec as I would write it exactly as you mentioned at the beginning via useEffect(). Now while transitioning to Next.js, I like definitely this one-way approach

I recently started a project on a brand new framework recently (Next.js) with TypeScript as well (first typescript experience as well) and discovered this method of handling something like "state" in server components. Basically I had a product page and needed to do pagination and filtering, I did it using the query string.

I have a short attention span, but you shared information continuously, which kept me engaged throughout.

This video was very helpful, I'm learning so many new things from you that I didn't know that can cause problems in my apps. Thank you so much

Thanks, very good content. A lot of real world cases, can't wait for your course! :)

I never thought of it like this. I'm sure it'll be useful to know in the future! Many thanks

Definitely one of the best out there!

wanted to use this concept in my latest next project and you just explained things i needed to know, good info and explanation

The content was amazing. I used this approach in my project.

This is a very cool and unique example, looking forward to more. GJ

Great content man. Keep it up!

I'm doing a search function and was gonna use a state manager to manage this problem, perfect timing XD Thank you

amazing content from you like always 🔥🔥

You make absolutely great tutorials, thank you for sharing!

Very nicely explained and demonstrated 👍

This is just amazing. Glad I discovered you - amazing teacher. #subscribed

Neat approach, you just gained another sub

Huge fan of this approach :)

very well tutorial, you finally teach me how to think the next-js way ❤

Great video! Super helpful and well presented!

True, derived state makes some features so much simpler to build, thanks for sharing

Great tutorial! you got a subscriber

That is an excellent video! Thanks so much.

amazing content ! Keep up the good work sir

It's really something great for me, actually, I'm looking for something similar to this concept and I got it. So much thanks sir

thanks, mate. it was great explanation :)

Never knew you have had a KZfaq channel. I discovered you from your CSS udemy course. Quality work.

Your tutorials are very informative

Thank you so much! This way of handling state is nothing knew, but I personally never put much thought into it until this video, and always defaulted to client state, with all the issues you listed. Typical aha moment. From now on you convinced me to always default to query params to handle state, unless there is a serious reason not to do so.

not using react or next, or tsx but this is so true! especially for modals, i like to keep my active modal info on the hash part of the url that way both page data and modal data can be placed on the url but of course you can use url params too i mean you realize that your site/app needs this the moment you refresh the page

watching your first video , became a fan of you broooooooo.. god bless you

Amazing, super helpful!

many thanks for great content ❤

mind blowing I always work with states, i'm looking foward to implement this solution in some of my works *-* and it works really good together with server side in next

So informative. Thanks for sharing

Always a super useful technique especially for UI's that you likely want to remember state when you copy and paste the link.

This was great & easy 👌🏻

That was awsome, ty man!!

Dzięki za porady!

Thanks for this video, it helped me a lot.

Wow! I didn't know about History API and its pushState method. Great! It can be used even in vanilla JavaScript projects. Thank you for the video.

This is so insightful and useful

Amazing, thanks mate 👌👌

Just subscribed, I love your content man! I wish the audio can be improve soon.

My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.

Thanks for this content broth

Dobra Robota

I had similar use case today, pulled my hair for hours; Thanks brother 😊

really. incredible. keep up

thank you, sir. from your knowledge. I am learned something new from this.

That's a really cool trick using the Link component to append a query param. Didn't know that was a thing!

Pretty well explained. I didn't know server components get the searchParams as props by default!

Thankyou so much!

Thank you so much. Now I found a way to select filters without use client.

Exactly what I need right now.

Am seriously anticipating your next js and react course. Great content as always

a very intense video ,thank you very much teacher.

you are amazing at explaining ❤

thank you, this video helped me quite a lot

I cant thank you enough for this tutorial.

Very good video. Thank you.

I love your videos. Thank you!

thank you very much for this Great explanations,,!,,!!

Great approach

You way of explaining is Awesome, I love you videos.

I juste love your content. thank you for your useful videos

Best youtubers for beginngers: Lama Dev, and Net Ninja Best youtuber for junior and middle developers: YOU

You got subscriber. Nice tutorial.

Your videos are awesome! Just need to raise the audio volume a little bit.

Thanks, very helpful informations

An awesome technique 😍😍

freaking smart way of making the state in the URL never crossed my mind smart ass shit.

Great video!! Thanks for sharing. 😉🔥

Just a note: I tried, lifting up my state to the url path. But in my specific case, it made the app very unresponsive. I do not know why. It was basically for a filter component. But after changing the filter (tried both params and searchParams) it would sometimes take seconds or even longer until the new state was shown in the app (both in url and component). Do you have any idea why this could be? I had eliminated all client components, it seemed to just be a lag in the client -> server communication? I was fetching data in a `page` which i would then filter by the route params and pass the filtered data down to a list component and the filter component to display the active state. Any tutorial on that (real world use case) with fetching data, I would be happy about.

great video, thank you

Another amazing video. I do have a follow-up question: In your example, the page is a presumably dynamic route? How do we utilize those dynamic elements (again, in your example, 'product' and 't-shirt') at the same time we are accessing the query-params? Thanks as always!

Thanks for the video, I liked it a lot, will you by any chance upload more material like this also using useOptimistic and so on? all the best

awesome!

This is a really great video :) and super interesting. I know it's nothing to do with the video but the "JavaScript magic" to make the first letter uppercase on those buttons is just "text-transform: capitalize;" in CSS 👍

I find Wesley to be the best NextJS teacher.

In case you weren’t aware, your content is top notch 👌

Excellent. thanks