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.
It depends on the requirements. If you're developing apps that don't share data like admin panels, use states and react. But if you're developing sites that do share data like e-commerce websites, use params and next js.
It's not a niche concept putting stuff in query parameters was how Web1.0 did things because there was no client state, we've officially come full circle.
What you mean niche concept? That’s how the internet works and always worked 😊 It’s just that some websites are broken so he’s teaching how to fix it 😅
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!! 🥳
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.
I stumbled upon your UA-cam 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 🔥🔥
Randomly this video popped up in my break session and I thought let's open this and omg I didn't even realized that i needed this for more efficient code. The way you explained it never felt like someone is teaching, i just watched whole video and learned without any hesitations. You are just a piece of art!
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.
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!
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
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.
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
Great tutorial. There are situations where useState still shines better and there are situations where this method would be perfect. I remember doing same thing on a client's project earlier this year. I needed to keep the state on the url since I would be navigating back to that same page after user completed their stripe integration. Storing in useState didn't make sense to me, so I stored the state on the url and it worked perfectly. If you're dealing with object states, useState remains the best. If you do not need to persist the state when you share the url, useState is still the best.
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.
Query strings are usually a lot harder to work with than useState, you have to validade the input to avoid errors, specially if you change things and the query data becames stale, but anyways query strings provides a great UX
If your data/endpoint inferred from the searchParams, it won't become stale. searchParams should be the SSOT (single source of truth). And as these are user-controlled, there should be some validation - yes. A small validation function is the trade-off for the greater UX
Validation is always an issue and honestly, in a case like this it is simply absurd to expect query parameters to exist immediately. For these things you should always have a fallback.
In the color button section, if u want to uppercase the first letter, u can do it with css, so in tailwind u can use "uppercase" class name. Sorry if im misunderstanding ur intention.
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 👍
Hey! I really glad to see that someone show this method to handling state in url, but this solution has potential disadvantage. It's animations. It's harder control when they're removed from the React tree. So when I use Framer motion, I can't make nice animations. Maybe vanilla css will, idk
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!
Love this solution for handling state especially when you want to set state down the tree and read it across other components. The issue I’ve run in Next 13 is setting the paean jumps you to the top of the page. Even when using replace…
yes, I recently had a problem keeping state with ssr and client at the same time. It was pain in the ass, I moved it to url and it feels so good, and at the same time, url is sharable, so your state is not only in your app but you can even share it to someone and they'll immediately see the thing you want them to see. I was thinking what could be the down sides of doing this, i mean my state is not big and only about 1-3 query params most of the time? What could go bad with this ? And I just started to watch the video, and OMG the intro, he talks about all the pain points I had. This is gonna be enjoyable watch, I can smell it.
It's a great tutorial. Nice pros and good pacing with good examples. A bit of constructive feedback - I think you're missing several important points. 1) Validation - treating the URL as a single source of truth is fine - however it's super easy to mangle, incorrectly enter or purposefully break the URL - would have loved to see some patterns to deal with that. (as a side note - putting `as string` is not asserting anything - it's just telling typescript to ignore the fact that the URL param can actually be an array type) 2) Async examples - in your case - setting the attributes for the t-shirt (esp. on the server side) is straightforward. However if you have a more complicated example where the product details are being retrieved from a database - it gets tricky to validate and apply the URL params against a dynamically set object. Also need to handle resyncing the URL if they are invalid. While the pros are good - there are some cons to this that become obvious with advanced usage.
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
i was looking to make a seperate context for a boolean value as a side effect of another context state change, but with the abuse of url its free state across the app😁 thank you
Great video, but how would this work if you have a search component to search something, and want to handle and display the loading state while its being fetched? a solution i could think of is using ternary but what if I wanted to use the next.js default loading.tsx file?
I learned this when I was working with react router lifting state up to the url so even when user navigates around in app we can pass on this state so when they come back to same page the state doesn't get lost
1:59 You state that this is good for SEO, but I've met experts who say the exact opposite: "search engines cannot parse url params and treat every variant as page duplication". Can you provide the source of your claim? I just wanted to read some more about this topic and any additional data to prove to SEO masters that good UX is also good practice for search optimization.
I’m so looking forward to your course on nextjs @ByteGrad. One question - are you covering SaaS workspace based functionality like limiting access to workspace. Perhaps through prisma / middleware? I think it’ll be a very useful topic to cover from a Middleware perspective and a SaaS perspective as it’s so common to many applications. Would also love to add this filter url topic to the course! Cannot wait
i usually make a function for changing spesific item in query without effecting others, like this: changeQuery("size" , "sm") -----> change size in url to md, this will not effect others like color and name
How would you handle the query params if they are dynamic? I mean, on this case you know that you have color and size. What if you got the product options from an api and you don't know what and how many they are. How would you go about generating the search params that you pass to the Link's href?
Obviously i knew that but i did not have the mindset that you show in that video. Great content ! I have to say that queries can lead to security issues if the content of the query is meant to be displayed somewhere in the UI ! So in some usecases, queries have to be sanitized.
One of the problems with using this method on Next.js is that the UI does not update until page.tsx is finished rendered. So if you click "White", it will not update the UI until the client finishes fetching the next page. It will be better to maintain some client state and listen to updates so the client UI can update immediately. Let me know if I'm missing something.
Great video! but what if the use case is to select something and change the api response? e.g a filter page. don't you need useEffect for that? you will need the filter params first from the actual api and then when url changes it needs to re-fetch the actual response from the api with the new variables via rest or graphql. like fetching products with an array of size selections and an array of colour selections. where the fetch function will need to be?
I agree a lot with this. I'm not really a frontend dev but when i use ecommerces that have state stored locally not in the query itself it frustrates me because I can simply send someone a link with all the right product details already choosen instead I have to tell them all the specifics
Hi 👋 I was wondering if its possible to please make a little/medium project with the most important points you showed in your vids. Would really appriciate it! 😁
Thanks! How would you go about doing multiple values for one type of param? Would you do ?abc=one,two,three or ?abc=one&abc=two&abc=three ? Also, the URL updates seem to have a several second delay when I've tried it with Next.js 🤔
Not sure if anyone mentioned but I see you're using tailwind. You can use tailwind "capitalize" to skip having to do all that JS work to capitalize the first letter.
Great video. One thing is I wouldn’t use useEffect to sync with the url - I know it was part of the “don’t do this example” but if you were to use state and push to the url, having the state updates and the url updates in a function that’s called when the user selects an option would be better IMO
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.
Yeah, good points
Arigato
Thank u!
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!
This is awesome with server components! Very detailed video that includes URL encoding and search params. Waiting for your nextjs course :D
Thanks! 😃
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.
it's php with a mint flavor and I'm here for it
Modern PHP with HTMX is the dream and I'm living it
It depends on the requirements. If you're developing apps that don't share data like admin panels, use states and react. But if you're developing sites that do share data like e-commerce websites, use params and next js.
Such a niche concept and he teaches us for free even though he has paid courses. Kudos my man!!
Thanks
It's not a niche concept putting stuff in query parameters was how Web1.0 did things because there was no client state, we've officially come full circle.
@@RealRatchetNow we write in components and not in pages.
That's the only thing changed from Web 1.0
@@RealRatchet yeah true, but I'm a new developer so new thing to me
What you mean niche concept? That’s how the internet works and always worked 😊
It’s just that some websites are broken so he’s teaching how to fix it 😅
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!! 🥳
Awesome, thank you!
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.
I stumbled upon your UA-cam 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 🔥🔥
Randomly this video popped up in my break session and I thought let's open this and omg I didn't even realized that i needed this for more efficient code. The way you explained it never felt like someone is teaching, i just watched whole video and learned without any hesitations. You are just a piece of art!
This is actually clean and good. Just need to handle the magic strings gracefully and it's perfect.
You earned my sub.
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.
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!
Im very lucky to find your channel on random search.. Tq god for suggesting this gem channel... Tqss dude keep adding more videos 😍👍
This tip saved me a lot of time today! Thank you so much! Eager waiting for your Next.js course!
Amazing tutorial man! Never had that idea to use URL parameters not for a search but for products until now, thank you!
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
Excellent presentation and explanation. Loved the pace of the video, not slow, not fast. Subscribed.🤩
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'm doing a search function and was gonna use a state manager to manage this problem, perfect timing XD
Thank you
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
Huge fan of this approach :)
Dziękuję bardzo za tutoriale, właśnie kupiłem dwa twoje kursy, niesamowita treść! 🚀👏🎬
Thanks Guilherme! Appreciate it
The best js teacher 👌🏽 not a lot of blabla . Straightforward to the important features . I hope you make udemy courses one day
Best youtubers for beginngers: Lama Dev, and Net Ninja
Best youtuber for junior and middle developers: YOU
Haha thanks
Thanks, very good content. A lot of real world cases, can't wait for your course! :)
Great tutorial. There are situations where useState still shines better and there are situations where this method would be perfect. I remember doing same thing on a client's project earlier this year. I needed to keep the state on the url since I would be navigating back to that same page after user completed their stripe integration. Storing in useState didn't make sense to me, so I stored the state on the url and it worked perfectly. If you're dealing with object states, useState remains the best. If you do not need to persist the state when you share the url, useState is still the best.
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.
I never thought of it like this. I'm sure it'll be useful to know in the future! Many thanks
An awesome video with great details and explanation, loved it!!! Keep Up the good work
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
wanted to use this concept in my latest next project and you just explained things i needed to know, good info and explanation
True, derived state makes some features so much simpler to build, thanks for sharing
Query strings are usually a lot harder to work with than useState, you have to validade the input to avoid errors, specially if you change things and the query data becames stale, but anyways query strings provides a great UX
If your data/endpoint inferred from the searchParams, it won't become stale. searchParams should be the SSOT (single source of truth). And as these are user-controlled, there should be some validation - yes.
A small validation function is the trade-off for the greater UX
Another thing: we shouldn't be building the searchParams by hand anyways. There's URLSearchParams for that
You should be validating data that you use with useState, too, if it comes from userland.
everything has its tradeoffs
Validation is always an issue and honestly, in a case like this it is simply absurd to expect query parameters to exist immediately. For these things you should always have a fallback.
In the color button section, if u want to uppercase the first letter, u can do it with css, so in tailwind u can use "uppercase" class name. Sorry if im misunderstanding ur intention.
Yeah, it was a silly mistake
capitalize
Never knew you have had a UA-cam channel. I discovered you from your CSS udemy course. Quality work.
I love you. You’re an awesome teacher. I’m grateful to have found your channel 🙏🏻
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 👍
or since he's using tailwind just className="capitalize"
In case you weren’t aware, your content is top notch 👌
Thanks Zachary, always good to hear :D
Hey! I really glad to see that someone show this method to handling state in url, but this solution has potential disadvantage. It's animations. It's harder control when they're removed from the React tree. So when I use Framer motion, I can't make nice animations. Maybe vanilla css will, idk
Interesting, thanks for sharing
Great content man. Keep it up!
Just subscribed, I love your content man! I wish the audio can be improve soon.
Yes, will improve soon. 2-3 more videos with this haha
watching your first video , became a fan of you broooooooo.. god bless 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!
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.
That's a really cool trick using the Link component to append a query param. Didn't know that was a thing!
This is a very cool and unique example, looking forward to more. GJ
The content was amazing. I used this approach in my project.
Love this solution for handling state especially when you want to set state down the tree and read it across other components. The issue I’ve run in Next 13 is setting the paean jumps you to the top of the page. Even when using replace…
You can configure that on the Link component (set ‘scroll’ prop to false)
yes, I recently had a problem keeping state with ssr and client at the same time. It was pain in the ass, I moved it to url and it feels so good, and at the same time, url is sharable, so your state is not only in your app but you can even share it to someone and they'll immediately see the thing you want them to see.
I was thinking what could be the down sides of doing this, i mean my state is not big and only about 1-3 query params most of the time? What could go bad with this ?
And I just started to watch the video, and OMG the intro, he talks about all the pain points I had. This is gonna be enjoyable watch, I can smell it.
Always a super useful technique especially for UI's that you likely want to remember state when you copy and paste the link.
this guy is the best tech youtuber ever
I had similar use case today, pulled my hair for hours;
Thanks brother 😊
It's a great tutorial. Nice pros and good pacing with good examples.
A bit of constructive feedback - I think you're missing several important points.
1) Validation - treating the URL as a single source of truth is fine - however it's super easy to mangle, incorrectly enter or purposefully break the URL - would have loved to see some patterns to deal with that. (as a side note - putting `as string` is not asserting anything - it's just telling typescript to ignore the fact that the URL param can actually be an array type)
2) Async examples - in your case - setting the attributes for the t-shirt (esp. on the server side) is straightforward. However if you have a more complicated example where the product details are being retrieved from a database - it gets tricky to validate and apply the URL params against a dynamically set object. Also need to handle resyncing the URL if they are invalid.
While the pros are good - there are some cons to this that become obvious with advanced usage.
Yes, great points, thanks for sharing!
Your videos are awesome! Just need to raise the audio volume a little bit.
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
amazing content ! Keep up the good work sir
Thanks, will do!
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
very well tutorial, you finally teach me how to think the next-js way ❤
Definitely one of the best out there!
Am seriously anticipating your next js and react course. Great content as always
Great to hear Jerry!
i was looking to make a seperate context for a boolean value as a side effect of another context state change, but with the abuse of url its free state across the app😁
thank you
Great video, but how would this work if you have a search component to search something, and want to handle and display the loading state while its being fetched? a solution i could think of is using ternary but what if I wanted to use the next.js default loading.tsx file?
hey, could you please elaborate about the ternary approach? i'm struggling to find a solution for this problem myself 😅😅
This is just amazing. Glad I discovered you - amazing teacher. #subscribed
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
Pretty well explained. I didn't know server components get the searchParams as props by default!
I learned this when I was working with react router lifting state up to the url so even when user navigates around in app we can pass on this state so when they come back to same page the state doesn't get lost
1:59 You state that this is good for SEO, but I've met experts who say the exact opposite: "search engines cannot parse url params and treat every variant as page duplication". Can you provide the source of your claim? I just wanted to read some more about this topic and any additional data to prove to SEO masters that good UX is also good practice for search optimization.
I’m so looking forward to your course on nextjs @ByteGrad. One question - are you covering SaaS workspace based functionality like limiting access to workspace. Perhaps through prisma / middleware? I think it’ll be a very useful topic to cover from a Middleware perspective and a SaaS perspective as it’s so common to many applications.
Would also love to add this filter url topic to the course!
Cannot wait
Yes, one project will be a SaaS, it will have some advanced features like that too.
Phenomenal! I saw that you said released soon. Do you have an ETA?
I will give a date soon to email subscribers :)
@@ByteGrad Already done! :)
You make absolutely great tutorials, thank you for sharing!
i usually make a function for changing spesific item in query without effecting others, like this:
changeQuery("size" , "sm") -----> change size in url to md, this will not effect others like color and name
Neat approach, you just gained another sub
Depends on your case. This is a great practice for searching and fetching tasks.
This just feels right. UX is more than just visuals when designing a website.
thank you, sir. from your knowledge. I am learned something new from this.
How would you handle the query params if they are dynamic? I mean, on this case you know that you have color and size. What if you got the product options from an api and you don't know what and how many they are. How would you go about generating the search params that you pass to the Link's href?
good question. I will test this solution, that should fetch data and then set to the URL.
Obviously i knew that but i did not have the mindset that you show in that video. Great content ! I have to say that queries can lead to security issues if the content of the query is meant to be displayed somewhere in the UI ! So in some usecases, queries have to be sanitized.
You way of explaining is Awesome, I love you videos.
Thank you so much 😀
One of the problems with using this method on Next.js is that the UI does not update until page.tsx is finished rendered. So if you click "White", it will not update the UI until the client finishes fetching the next page. It will be better to maintain some client state and listen to updates so the client UI can update immediately. Let me know if I'm missing something.
amazing content from you like always 🔥🔥
Great video! but what if the use case is to select something and change the api response? e.g a filter page. don't you need useEffect for that? you will need the filter params first from the actual api and then when url changes it needs to re-fetch the actual response from the api with the new variables via rest or graphql. like fetching products with an array of size selections and an array of colour selections. where the fetch function will need to be?
Great video! Super helpful and well presented!
This is a brilliant UX solution that's also safe to use with server components, great video man :)
great content, I was surprised when I saw the browser in Polish hah :D greetings
I agree a lot with this. I'm not really a frontend dev but when i use ecommerces that have state stored locally not in the query itself it frustrates me because I can simply send someone a link with all the right product details already choosen instead I have to tell them all the specifics
Thank you so much. Now I found a way to select filters without use client.
Hi 👋 I was wondering if its possible to please make a little/medium project with the most important points you showed in your vids. Would really appriciate it! 😁
Thanks! How would you go about doing multiple values for one type of param? Would you do ?abc=one,two,three or ?abc=one&abc=two&abc=three ?
Also, the URL updates seem to have a several second delay when I've tried it with Next.js 🤔
I like to keep state in the URL and use links + server components to make it work without JS
Great video, But isn't that bad that we have to rerender the whole page each time we change a color or size ?
I wonder if Link component is the appropriate one here instead of a button, if seen from an accessibility perspective.
Yeah that’s debatable
Not sure if anyone mentioned but I see you're using tailwind. You can use tailwind "capitalize" to skip having to do all that JS work to capitalize the first letter.
Great video!! Thanks for sharing. 😉🔥
Thanks for watching!
Great video. One thing is I wouldn’t use useEffect to sync with the url - I know it was part of the “don’t do this example” but if you were to use state and push to the url, having the state updates and the url updates in a function that’s called when the user selects an option would be better IMO
Great approach
I agree, underused by many devs
Will you use router.replace instead of the next Link component? In a use case where you don't want to rewrite the URL history
Both are possible. The Link component in Next.js also has a “replace” prop that allows you to configure this
@@ByteGrad thanks for the reply. I really like your last few videos I've seen from you on NextJS and tailwind +1 Sub
Dzięki za porady!
Bez problemu!
I juste love your content. thank you for your useful videos
Very nicely explained and demonstrated 👍
Your tutorials are very informative