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

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 447

  • @alexnelson2119
    @alexnelson2119 Год назад +82

    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
    @samyakpiya Год назад +22

    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!

  • @dimitrisborbotsialos
    @dimitrisborbotsialos Год назад +128

    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.

    • @Diegps
      @Diegps Год назад +5

      it's php with a mint flavor and I'm here for it

    • @spicynoodle7419
      @spicynoodle7419 Год назад +5

      Modern PHP with HTMX is the dream and I'm living it

    • @billypentester
      @billypentester Год назад +5

      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.

  • @webdev_telugu
    @webdev_telugu Год назад +104

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

    • @ByteGrad
      @ByteGrad  Год назад +6

      Thanks

    • @RealRatchet
      @RealRatchet Год назад +40

      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.

    • @shrin210
      @shrin210 Год назад +4

      ​@@RealRatchetNow we write in components and not in pages.
      That's the only thing changed from Web 1.0

    • @webdev_telugu
      @webdev_telugu Год назад

      @@RealRatchet yeah true, but I'm a new developer so new thing to me

    • @henriquematias1986
      @henriquematias1986 Год назад +2

      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 😅

  • @developerpranav
    @developerpranav Год назад +49

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

  • @lets_see_777
    @lets_see_777 Год назад +5

    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.

  • @saadelfadil
    @saadelfadil 11 месяцев назад +3

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

  • @wannabe_Akshat
    @wannabe_Akshat 4 месяца назад +1

    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!

  • @kevin-ty7it
    @kevin-ty7it Год назад +2

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

  • @foreverl01
    @foreverl01 Год назад +26

    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
    @coffeefps Год назад +5

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

  • @simoncunningham2964
    @simoncunningham2964 7 месяцев назад +1

    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!

  • @taicheeeee
    @taicheeeee Год назад +1

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

  • @silentlyow
    @silentlyow Год назад +5

    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.

  • @Olga-id1qy
    @Olga-id1qy Год назад +1

    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

  • @vikasni95
    @vikasni95 Год назад +2

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

  • @MOURADSLIM
    @MOURADSLIM Год назад +1

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

  • @akuya-ekorot
    @akuya-ekorot Год назад +1

    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.

  • @codewithguillaume
    @codewithguillaume Год назад +1

    Huge fan of this approach :)

  • @nomadshiba
    @nomadshiba Год назад +2

    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

  • @ebratz
    @ebratz Год назад +1

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

  • @andreilucasgoncalves1416
    @andreilucasgoncalves1416 Год назад +55

    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

    • @zettca
      @zettca Год назад +14

      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

    • @zettca
      @zettca Год назад +8

      Another thing: we shouldn't be building the searchParams by hand anyways. There's URLSearchParams for that

    • @Kaioin
      @Kaioin Год назад +13

      You should be validating data that you use with useState, too, if it comes from userland.

    • @wisdomelue
      @wisdomelue Год назад +4

      everything has its tradeoffs

    • @CottidaeSEA
      @CottidaeSEA Год назад

      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.

  • @perraanal
    @perraanal 11 месяцев назад +1

    this guy is the best tech youtuber ever

  • @oidualx
    @oidualx Год назад +1

    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.

  • @Lapatate-s1l
    @Lapatate-s1l 4 месяца назад +1

    The best js teacher 👌🏽 not a lot of blabla . Straightforward to the important features . I hope you make udemy courses one day

  • @kings-code6675
    @kings-code6675 3 месяца назад +1

    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.

  • @rubelhossain8517
    @rubelhossain8517 Год назад +4

    amazing content ! Keep up the good work sir

  • @guilhermeferreirabr
    @guilhermeferreirabr Год назад +4

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

    • @ByteGrad
      @ByteGrad  Год назад +2

      Thanks Guilherme! Appreciate it

  • @James-rd1sb
    @James-rd1sb Год назад +1

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

  • @ZacharyBetz
    @ZacharyBetz Год назад +1

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

    • @ByteGrad
      @ByteGrad  Год назад

      Thanks Zachary, always good to hear :D

  • @raymondmichael4987
    @raymondmichael4987 Год назад +1

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

  • @mohammadshariarparvez669
    @mohammadshariarparvez669 Год назад +1

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

  • @DiogoLScarmagnani
    @DiogoLScarmagnani Год назад +1

    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.

  • @billypentester
    @billypentester Год назад +1

    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

  • @maisamafshar
    @maisamafshar Год назад +3

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

  • @weebdeveloper
    @weebdeveloper Год назад +1

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

  • @romeorel1679
    @romeorel1679 Год назад +1

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

  • @arinium
    @arinium 10 месяцев назад +1

    You make absolutely great tutorials, thank you for sharing!

  • @pi3ni0
    @pi3ni0 Год назад +1

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

  • @ardianhotii
    @ardianhotii Год назад +1

    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

  • @jou3883
    @jou3883 Год назад

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

  • @glauberbispo8922
    @glauberbispo8922 Год назад +1

    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

  • @veedjohnson
    @veedjohnson Год назад +2

    Definitely one of the best out there!

  • @LePhenixGD
    @LePhenixGD Год назад +4

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

  • @mu_yaser
    @mu_yaser Год назад +1

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

  • @abdullah_siddiquii
    @abdullah_siddiquii Год назад +2

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

  • @NOTHING-en2ue
    @NOTHING-en2ue Год назад +1

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

  • @user-ge2vc3rl1n
    @user-ge2vc3rl1n Год назад +1

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

  • @rinyato
    @rinyato Год назад +1

    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.

  • @saitharunreddya2046
    @saitharunreddya2046 Год назад +1

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

  • @ChrisHaupt
    @ChrisHaupt 11 месяцев назад +1

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

  • @Imjoshnewton
    @Imjoshnewton Год назад +1

    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…

    • @ByteGrad
      @ByteGrad  Год назад +1

      You can configure that on the Link component (set ‘scroll’ prop to false)

  • @lorsothy6263
    @lorsothy6263 Год назад +1

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

  • @stephenngeorge
    @stephenngeorge Год назад +2

    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 👍

    • @redeemr
      @redeemr Год назад

      or since he's using tailwind just className="capitalize"

  • @ganumba11
    @ganumba11 Год назад +1

    amazing content from you like always 🔥🔥

  • @blazi_0
    @blazi_0 Год назад +1

    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

  • @Scrappycoco
    @Scrappycoco Год назад +1

    Great content man. Keep it up!

  • @igboanugwocollins4452
    @igboanugwocollins4452 Год назад +1

    Neat approach, you just gained another sub

  • @OpenCoreX
    @OpenCoreX Год назад +1

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

  • @peterabouabsi8427
    @peterabouabsi8427 Год назад +1

    Depends on your case. This is a great practice for searching and fetching tasks.

  • @zzz-1x
    @zzz-1x 11 месяцев назад +1

    This video mention the way which i implemented before. Confirm that this way is really effecient and quite clear

  • @LearnFrontendNow
    @LearnFrontendNow Год назад +1

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

  • @mohammedelmoutaouakkil
    @mohammedelmoutaouakkil Год назад +1

    Great tutorial! you got a subscriber

  • @marchugans
    @marchugans Год назад +5

    Great approach

    • @ByteGrad
      @ByteGrad  Год назад

      I agree, underused by many devs

  • @AkoMawlood
    @AkoMawlood 6 месяцев назад +1

    a very intense video ,thank you very much teacher.

  • @youssefaserrar2001
    @youssefaserrar2001 Год назад +2

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

    • @ByteGrad
      @ByteGrad  Год назад

      Thank you so much 😀

  • @i.j.5513
    @i.j.5513 Год назад +1

    Very nicely explained and demonstrated 👍

  • @alirezagarshasbi6557
    @alirezagarshasbi6557 Год назад +4

    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

  • @TitoMitto
    @TitoMitto Год назад +1

    Your tutorials are very informative

  • @spacecowboyofficial
    @spacecowboyofficial Год назад +2

    This just feels right. UX is more than just visuals when designing a website.

  • @s8x.
    @s8x. 3 месяца назад +1

    wow fantastic video. learned so much from this

  • @chrishanthacosta4093
    @chrishanthacosta4093 Год назад +2

    I find Wesley to be the best NextJS teacher.

  • @giandenorte
    @giandenorte Год назад +1

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

    • @ByteGrad
      @ByteGrad  Год назад

      Yes, will improve soon. 2-3 more videos with this haha

  • @mmaarafat
    @mmaarafat Год назад +1

    thanks, mate. it was great explanation :)

  • @septiantonrezkirahmatulloh3837
    @septiantonrezkirahmatulloh3837 Год назад +1

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

  • @nick-ui
    @nick-ui Год назад +3

    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

    • @ByteGrad
      @ByteGrad  Год назад

      Interesting, thanks for sharing

  • @mohammadmo9290
    @mohammadmo9290 Год назад +1

    Amazing, thanks mate 👌👌

  • @johncaballero5463
    @johncaballero5463 Год назад +1

    Exactly what I need right now.

  • @fulltimefrontend
    @fulltimefrontend Год назад +1

    We actually use this trick since 3 years in our React apps as well.

  • @ogbillity
    @ogbillity Год назад +1

    I cant thank you enough for this tutorial.

  • @abdulazizaskaraliev6119
    @abdulazizaskaraliev6119 Год назад +1

    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.

  • @CodingBill
    @CodingBill 4 месяца назад

    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.

  • @dero433
    @dero433 Год назад +3

    Dzięki za porady!

  • @WojciechBlachut
    @WojciechBlachut Год назад +1

    That is an excellent video! Thanks so much.

  • @KamilDrozdz
    @KamilDrozdz Год назад +2

    great content, I was surprised when I saw the browser in Polish hah :D greetings

  • @ota-ke
    @ota-ke Год назад +3

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

  • @lukas.webdev
    @lukas.webdev Год назад +2

    Great video!! Thanks for sharing. 😉🔥

    • @ByteGrad
      @ByteGrad  Год назад +1

      Thanks for watching!

  • @filipniklas
    @filipniklas Год назад +2

    Great video! Super helpful and well presented!

  • @loydcose2780
    @loydcose2780 Год назад +1

    Amazing, super helpful!

  • @codinginflow
    @codinginflow 11 месяцев назад +1

    I like to keep state in the URL and use links + server components to make it work without JS

  • @juanhedderich
    @juanhedderich Год назад +1

    That was awsome, ty man!!

  • @fatihyurek-c5m
    @fatihyurek-c5m Год назад +1

    many thanks for great content ❤

  • @prajwalchoudhary4824
    @prajwalchoudhary4824 Год назад +2

    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

  • @AndersonSousa33
    @AndersonSousa33 Год назад +2

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

  • @ByteGrad
    @ByteGrad  Год назад +32

    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.

    • @brancode404
      @brancode404 Год назад +1

      Can't wait for it. I hope it'll be out this Month? 😮

    • @ByteGrad
      @ByteGrad  Год назад

      @@brancode404 Sending the exact date to email subscribers :)

    • @thevasupodcast4561
      @thevasupodcast4561 Год назад

      Can you please also club react jobs that you find in your newsletter?

    • @youneshenni5417
      @youneshenni5417 Год назад +1

      What application will you build in the upcoming next js course? Looking forward to it :)

    • @ByteGrad
      @ByteGrad  Год назад

      @@youneshenni5417 I''ll show screenshots of them soon in the newsletter

  • @MdNaimurRahmanHera
    @MdNaimurRahmanHera Год назад +1

    An awesome technique 😍😍

  • @jerryfrancis7495
    @jerryfrancis7495 Год назад +1

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

    • @ByteGrad
      @ByteGrad  Год назад

      Great to hear Jerry!

  • @robert-freaking-kovacs
    @robert-freaking-kovacs Год назад +1

    Amazing feature for user experience and SEO

  • @shubhojeetbera
    @shubhojeetbera Год назад +1

    This was great & easy 👌🏻

  • @darwin2642
    @darwin2642 Год назад +1

    Thanks for this video, it helped me a lot.