STOP using useState, instead put state in URL (in React & Next.js)

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord where I actively participate

⏱️ Timestamps:
0:00 Examples
0:41 Benefits
2:38 Example overview
4:24 useState
6:56 Synchronize URL with useEffect
7:30 History API
7:54 Query string definitions
11:18 Problems with useState approach
11:58 Switch to URL for state
12:26 useSearchParams
13:35 Link component
16:11 Server component (searchParams)
17:13 Caveat 1: replace vs push
17:57 Caveat 2: unknown values
18:18 Caveat 3: no values
18:32 Caveat 4: url-encoded values (URLSearchParams)
20:47 Real-world use cases

#webdevelopment #programming #coding

[alexnelson]

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.

[samyakpiya]

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!

[saadelfadil]

I stumbled upon your YouTube 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 🔥🔥

[developerpranav]

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

[dimitrisborbotsialos]

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.

[lets_see_]

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.

[webdev_telugu]

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

[simoncunningham]

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!

[foreverl]

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!! 🥳

[coffeefps]

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

[maisamafshar]

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

[kevin-tyit]

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

[LePhenixGD]

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

[silentlyow]

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.

[vikasni]

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

[ebratz]

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

[Olga-idqy]

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

[seg_fault]

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.

[guilhermeferreirabr]

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

[mu_yaser]

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