React Hooks useContext Tutorial (Storing a User)

Поділитися
Вставка
  • Опубліковано 13 гру 2024

КОМЕНТАРІ • 370

  • @010timeboy27
    @010timeboy27 5 років тому +203

    My face after you mentioned the F2 tip 😲

    • @bawad
      @bawad  5 років тому +35

      You might also like some of my other vscode tricks benawad.com/vscode

    • @cloudeater9571
      @cloudeater9571 5 років тому +28

      @7:55 For anyone looking

    • @bernhardsmuts2265
      @bernhardsmuts2265 4 роки тому +1

      Mind blown!

    • @yotaraonvideo
      @yotaraonvideo 4 роки тому +1

      Oh my god yes, this is a game changer!

    • @marcusaureliusregulus2833
      @marcusaureliusregulus2833 3 роки тому

      And then he continues to manually change all of them😂

  • @Frazful
    @Frazful 3 роки тому +1

    I love how you use simple ass components on your tutorials. Less boiler plate, straight to the point.

  • @SumeetChawla
    @SumeetChawla 4 роки тому +73

    This was such an amazing demo. Clear and to the point!

  • @GeordyJames
    @GeordyJames 4 роки тому +7

    I watched the entire hooks playlist and this is the best react hooks video I ever watched. Thanks for creating...

  • @dockies
    @dockies 2 роки тому +1

    I've been struggling with this so much that I have to watch 7 videos regarding this topic and all it did is make me more confused. But your less than 15 minute video made me understand what it is and how to use it exactly. Kudos to you!

  • @tiagosbrito
    @tiagosbrito 5 років тому +35

    The best tutorial/explanation I ever got from the web, straight to the point, with useful content. Thanks for sharing your knowledge.

  • @ozzyfromspace
    @ozzyfromspace 3 роки тому +26

    I finally appreciate the logical flow from app state to context to context.provider. You absolutely rock, Ben! Thank you 😎👏🏽🔥

  • @arthurswanson3285
    @arthurswanson3285 3 роки тому +21

    Passing setUser as a context so that children can update parent contexts is an awesome pattern.

  • @mtsurov
    @mtsurov Рік тому

    I like that this is not just an explanation of hook syntax, but a practical application of it.

  • @Jake66564
    @Jake66564 3 роки тому +4

    Exactly what I needed, thanks! Helped me clean up some junky Stack Overflow suggestions that weren't working properly.

  • @pawzubr
    @pawzubr 5 років тому +108

    `createContext` does not take initial value - it takes the value that is provided when you try to use this context with no provider.

    • @PrashanthPuranik
      @PrashanthPuranik 4 роки тому +7

      Wow. I have been searching for this answer for a long time. I wish the documentation would state that clearly and upfront.

    • @juliohintze595
      @juliohintze595 4 роки тому

      Awesome tip!

    • @jjanchovi8568
      @jjanchovi8568 4 роки тому

      so its like a default value?lets say i dont add a value in the provider , then it will use whatever its in createContext? in Ben`s example - null.

    • @juliohintze595
      @juliohintze595 4 роки тому +1

      I was thinking about this... Why should we use a context with no provider?

    • @KanecoV
      @KanecoV 3 роки тому

      @@jjanchovi8568 yes, it's like a default value

  • @MrMarbles320
    @MrMarbles320 5 років тому +26

    EXACTLY what I was looking for, very well made, thank you!

  • @raymondmichael4987
    @raymondmichael4987 3 роки тому

    Two year later, I'm watching this, I wonder why it have such a low viewers count, looks some hooks are missing.
    This is real great, no bullshits or styles confusions.
    Greetings from Tanzania 🇹🇿

  • @AnhTu-en9gk
    @AnhTu-en9gk 3 роки тому +1

    this is the easiest context tutorial so far. Thank you

  • @HarisKhan-bh6uj
    @HarisKhan-bh6uj 2 роки тому

    one of the clearest explanation on useContext out there !

  • @alanhunt3772
    @alanhunt3772 4 роки тому +2

    Great video, Ben. I've been back and forth between this video and Web Dev Simplified's useContext tutorial and yours drove it home a little bit better with the practical login example- which is exactly what I'm doing in my project right now. Plus you threw in useMemo as a bonus- props!

  • @supermanbrz
    @supermanbrz 2 роки тому

    Without a form, you explained better than anyone else

  • @luisantoniojachozambrano7605
    @luisantoniojachozambrano7605 2 роки тому

    11 minutes of pure gold, thank you Ben.

  • @LewisCampbellTech
    @LewisCampbellTech 4 роки тому +1

    It's friday afternoon here, brain has had enough. I tried reading the react docs a few times, read a few blogs, but this video made it click. Nice work.

  • @DiestroCorleone
    @DiestroCorleone 2 роки тому

    Dude, this was awsome. I've seen lots of videos that overcomplicate the whole thing. After 5 minutes of your video, I already implemented useContext in an app I'm working in and it just saved me a lot of headaches. Thank you!
    WAIT A MINUTE. It's Ben Awad! How didn't I notice? And why am I not subscribed? I could swear I was. Well, guess you've (re)gained a subscriber.

  • @Ashnaflavdjov
    @Ashnaflavdjov 2 роки тому

    you saved me... from doing it the old way that is, started learning hooks yesterday and i see how usefull they are, love your content man

  • @sayanadhikary1682
    @sayanadhikary1682 3 роки тому

    The concept of ContextAPI became so much clearer for me as a noob in React.

  • @viktorlnt7835
    @viktorlnt7835 2 роки тому

    Now I understand why the algorithm kept recommending this guy, it was cool to watch him code

  • @dangre00
    @dangre00 3 роки тому +1

    This is the most beautiful useContext explanation on youtube. Sorry Kyle at WDS :(

  • @mokroargra7277
    @mokroargra7277 4 роки тому

    You saved me! I was struggling with getting data from one file to another and understanding context but as soon as I saw you setting state and using / setting state in other components / files, it all clicked. Was able to finish converting my vanilla JS app to React. Thank you!

  • @sumitmehra5119
    @sumitmehra5119 3 роки тому

    Bro. I've been struggling with react hooks like context, memo and other. Now usecontext is out of the list. Thanks to you. 👑👑

  • @김도형-g2i
    @김도형-g2i 4 роки тому +1

    wow... this is the cleanest example of useContext!

  • @VRtualboy
    @VRtualboy 4 роки тому

    Thank you for this tutorial! I have been stuck for the past week trying to figure out how to pass details of an authenticated user to other components. This is just what I needed, a clear and easy to follow explanation.

  • @justACasualProgrammer
    @justACasualProgrammer 3 роки тому

    I'm having trouble with this type of hook, your explanation and examples are very clear and simple. thank you so much!

  • @leshle1
    @leshle1 3 роки тому

    Excellent overview. Not too much, just enough to understand the concept so that I can utilize it. Really good job!!

  • @CalebDiT
    @CalebDiT 2 роки тому

    You did a great job of making it look easy. Or, put another way, you did a great job of clearing the smoke around something that isn't as complicated as I thought it was.
    Many thanks.

  • @abhishekghadge7543
    @abhishekghadge7543 3 роки тому +2

    The whole series has been so helpful for me. Thanks a lot for creating such awesome videos!

  • @marcusaureliusregulus2833
    @marcusaureliusregulus2833 3 роки тому

    Understood. Thanks. Also the sound of you typing is so satisfying😂

  • @stoicnash
    @stoicnash Рік тому

    Best demo ive seen, really nailed it!!!

  • @devyadav0399
    @devyadav0399 2 роки тому

    The only video that was able to help me. You're a godsend. Keep it up brother.

  • @hamaadfahim2916
    @hamaadfahim2916 2 роки тому

    Not only did he teach me useContext.. mans taught me useMemo. Best explanation

  • @noelcovarrubias7490
    @noelcovarrubias7490 3 роки тому

    I was having a little bit of trouble understanding this but I no longer have it. I love you man!

  • @sanhitabiswas1171
    @sanhitabiswas1171 3 роки тому +2

    Thanks a lot Ben. You have explained it so nicely . I have searching for session management in React and you made my journey so easy. Thanks again !!

  • @logicmonster6197
    @logicmonster6197 Рік тому

    my man is straight to the point thanks

  • @clarkdnro
    @clarkdnro 2 роки тому

    Benawad, you re good in programming. Totu keyboard typing and explanations sayit all. NICE

  • @nazrinibrahimli7042
    @nazrinibrahimli7042 Рік тому

    This is the best explanation I have ever seen!

  • @abdullahch8535
    @abdullahch8535 3 роки тому

    BEST useContext Tutorial

  • @mmmiyoung
    @mmmiyoung 4 роки тому +7

    This really helped me out. Thank you for taking the time to make this video. Real MVP.

  • @jamesnguyen868
    @jamesnguyen868 5 років тому +3

    awesome video Ben, keep up the great work

  • @joshuaheathcote2116
    @joshuaheathcote2116 Рік тому

    Straight to the point. Real nice.

  • @AnanyaSingh-jq8pp
    @AnanyaSingh-jq8pp 3 роки тому +1

    Thank you so much for explaining it so well. I was having a hard time using the useContext hook, you made it super easy. Thanks a lot!

  • @mohamadybr
    @mohamadybr 4 роки тому

    That explained a lot and helped me to clear my mind about this topic. Much appreciation! A very clear and well-explained video without any extra unnecessary info!

  • @lnhh
    @lnhh 2 роки тому

    Such a great and concise demo, even in 2022!

  • @jialiliang3606
    @jialiliang3606 2 роки тому

    Really enjoyed learning from your video! Nice work!!

  • @chadGPTSDE
    @chadGPTSDE Рік тому

    I will follow this man to the ends of the Earth

  • @TyrannosaurusTroy
    @TyrannosaurusTroy 2 роки тому

    Thank you so much for this tutorial! It helped the useContext hook finally click for me.

  • @webdeveloper1922
    @webdeveloper1922 2 роки тому

    It was clear and out of making any confusion

  • @marco114
    @marco114 4 роки тому

    This was the best explanation i have seen so far, thanks.

  • @davidbuyinza2651
    @davidbuyinza2651 3 роки тому

    You just made everything so easy. Thanks Ben.

  • @DEADSTEP12
    @DEADSTEP12 4 роки тому

    Couple days into developing my app and this is exactly what I needed!!! Thanks!

  • @ergceme
    @ergceme Рік тому

    it was a clear vid to learn basics of using context. thanks

  • @prathampatel6357
    @prathampatel6357 2 роки тому

    as clear as I was looking for, thank you very much

  • @AkshatSinghania
    @AkshatSinghania 3 роки тому

    best tut for react context on the planet , btw that mention of use memo took me to your another tut for usememo then it took me to useState , noice recursive videos

  • @CarlitoProductions
    @CarlitoProductions 3 роки тому

    Awesome! This helped tons with saving settings. I was prop drilling before but this hook saved my behind. Thanks!

  • @rakeshb2010
    @rakeshb2010 2 роки тому

    Simple and easy to understand. Thank you.

  • @yosoyhim
    @yosoyhim 2 роки тому

    Lifesaver. Been trying to find a simple example that I can follow and you did it! thank you

  • @MuhammadAli-bp6iq
    @MuhammadAli-bp6iq 4 роки тому +4

    😱 what? Holly molly. This is so powerful. We don’t need classes or redux anymore.

  • @jseyfert
    @jseyfert 3 роки тому +1

    clear concise and perfect!

  • @beinerthchitivamachado874
    @beinerthchitivamachado874 Рік тому

    MASTERFULLY EXPLAINED!!!

  • @kamrul91111
    @kamrul91111 3 роки тому +1

    what an absolute ducking legend

  • @whonayem01
    @whonayem01 2 роки тому

    You made it crystal clear!

  • @shark5749
    @shark5749 4 роки тому

    Thank you! Have been stuck on react hooks for days!

  • @adegokeayobamiseun728
    @adegokeayobamiseun728 2 роки тому

    Exactly what i need. Thanks ben

  • @MLGMondo
    @MLGMondo 3 роки тому

    Very clear explanation and straight to the point. Thanks a lot.

  • @jbreslow1
    @jbreslow1 3 роки тому +2

    How are you adding the imports automagically? 2:09

    • @theocarney940
      @theocarney940 3 роки тому

      press control + space with the cursor at the end of the item you need to import, and in the little context menu that pops up vscode will give you the option to autoimport
      he shows it here:
      ua-cam.com/video/t9kSTiqhUfg/v-deo.html

  • @aaasisssx
    @aaasisssx Рік тому

    clear and concise, and helpful.

  • @allin4one
    @allin4one Рік тому

    Thanks for the tutorial, trying to learn the context system for when Redux would be overkill.

  • @stoic2454
    @stoic2454 3 роки тому

    Exactly the thing i was looking for, thanku so so much ben!!!

  • @natewalchenbach8413
    @natewalchenbach8413 2 роки тому

    Such a good explanation. Thank you!!!

  • @Alphfirm
    @Alphfirm 4 роки тому

    Thanks so much! Best tutorial on context, I finally understood it now. Not too quick.

  • @vladislavishe
    @vladislavishe Рік тому

    Great! Thanks you! Best explain of context that i have seen.

  • @yasser.dev7
    @yasser.dev7 4 роки тому

    Amazing explanation, thanks Ben

  • @margaridalopes5810
    @margaridalopes5810 3 роки тому

    Just want to say that you just saved me!
    You're the best Ben!!!
    Thank you very much

  • @theflowwizard
    @theflowwizard 2 роки тому +1

    wouldn't value, or setValue anyway only change when value and setValue changes? I don't really get the use of useMemo in the context mentioned at 7:02

    • @mlejki1785
      @mlejki1785 Рік тому

      wondering the same thing, useMemo as i understand it is used to prevent expensive calculations during component rerenders

  • @sstawecki
    @sstawecki 2 роки тому

    Thanks for the quick lesson. Buen finde.

  • @geezer74
    @geezer74 3 роки тому

    Just beautiful! plainly beautiful.

  • @aliosman975
    @aliosman975 3 роки тому

    I was litterally looking for something like this thank you ❤️

  • @Speeds6080
    @Speeds6080 4 роки тому

    Best explanation ever !
    So clear and helped me out heaps !
    Thanks Ben

  • @kavehkarami6135
    @kavehkarami6135 4 роки тому +1

    thank you bro
    this really make my life and my codes better

  • @danielfernandez5709
    @danielfernandez5709 2 роки тому

    Thanks Ben!!! very good tutorial!! 🙂

  • @filip23128
    @filip23128 2 роки тому

    Thanks, great explanation!

  • @clement3072
    @clement3072 3 роки тому

    Hey, currently learning react I love your work and your amazing videos thanks man 👍

  • @AbdulRauf-jy4ks
    @AbdulRauf-jy4ks 3 роки тому

    Wooh....Best explaination.. saved a day .! .... From Pakistan .

  • @mtcindianutube
    @mtcindianutube 4 роки тому

    Thank you Ben, great learning in quick time

  • @Scottni2
    @Scottni2 3 роки тому

    Excellent info and walkthrough, thank you sir!

  • @bulldawggy123
    @bulldawggy123 4 роки тому

    This was amazing! So helpful. Exactly what I have been crying about. So grateful to you.

  • @philippefutureboy7348
    @philippefutureboy7348 5 років тому

    Thanks! Now if you are using a third party library to do your Auth you can separate that Auth library and update the context with the currently authenticated user, thereby making the React components independent from the Auth library. Neat!

  • @daydreameravani
    @daydreameravani Рік тому

    Thanks a lots , exactly what I am looking for.

  • @janns09
    @janns09 Рік тому

    Clear explanation.. ! Great thanks ..

  • @expectations2188
    @expectations2188 2 роки тому

    You are awesome Ben. You explained it so well. Thank you :)

  • @trungdeptrai
    @trungdeptrai 2 роки тому +1

    Yes i love it , thank for your sharing

  • @asadurrahmansifat
    @asadurrahmansifat Рік тому

    Nice explanation, thanks.

  • @developersdiary9513
    @developersdiary9513 3 роки тому

    Thanks Ben, appreciate that

  • @anthonymazzie4237
    @anthonymazzie4237 3 роки тому

    Super nice demo

  • @KrishnaKumar-jr7qq
    @KrishnaKumar-jr7qq 4 роки тому

    Thats a great explanation man .. Hats off to you !!