useContext Crash Course - Manage State Globally with this React Hook

Поділитися
Вставка
  • Опубліковано 3 січ 2025
  • This is one video of a larger React Hooks series. In this video, we cover useContext, which is a very popular hook to manage state globally.
    Github Repo:
    github.com/har...

КОМЕНТАРІ • 59

  • @Salah-YT
    @Salah-YT 2 роки тому +4

    bro after too many videos and too many Udemy courses I have, none of them explain like u I was so confused bro and I was so tired about useContext but now I just found u and I swear I say this is the last video but finely ur so good bro now I understand and I did SUB and LIKE and I'm gone to watch again and this time I follow u coding thx bro

  • @exoticcoder5365
    @exoticcoder5365 Рік тому +1

    this is the best tutorial of useContext well explained that I can finally understand among youtube tutorials, Thank you !

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

    This is the best context tutorial I've ever seen!

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

    This is the best explanation on useContext that I have seen

  • @brysonrivera7026
    @brysonrivera7026 2 роки тому +5

    I had such a hard time wrapping my head around useContext. This video is great. Thank you!

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

    The next generation channel, here I will stay. You're awesome dude!

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

    I think by far the best video to understand useContext for beginners
    Thanks a ton

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

    Hey! Thanks a lot. The most clear and to the point introduction to useContext and createContext on youtube. Cheers and may you have a good day!

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

    Best explanation of useContext I have come across, yet.

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

    Bro that was the best explanation on this hook that i've seen over youtube. Thanks. Now I ca go back to my React course ...

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

    omg, what an amazing explanation, for the first thirteen minutes i was like wtf, this dude didn't even talk about useContext yet. But as you said that part was necessary to learn the underlying concept of useCOntext. Thanks dude

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

    laith, your teaching style is up there as the best imo. and ive watched waaay too many tutorials lol. keep up the great work mate!

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

    Loving all the videos so far!

  • @rain42218
    @rain42218 3 місяці тому

    best React useContext tutorial out there. Thank you

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

    This was really good. I love the way you presented the different components with the shapes to really illustrate how it works 💪

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

    I am glad I came across your channel. Quick, short but very informative at the same time videos. You are very good teacher and I know how to pass the knowledge. Subscribed a waiting for more video from you :). Good job and thank you !

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

    you are the best teacher of all, even among those paid ones! Appreciate for your work.

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

    Couldn't have explained it any better 👏👏👏

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

    It was so easy to understand. I'm glad you break it down this way and now I understand. Thanks

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

    Thank you so much! What you explained here helped me much better than that from the offcial react article.

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

    How can I change the state in the last component in this example

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

    Dude, thank you. the videos you are doing are great, and the explanation is on point. keep the other videos coming :D

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

    This vid makes useContext so simple! I have a question about performance though: I heard useContext should be used sparingly since it causes a lot of rerenders. Any tips on performance optimizations? For example, if the context is only used in the parent and 5th child, do all the children in between also get rerendered? Are there ways to make it so that only the child element that needs a rerender is actually rerendered?

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

      Yes there are ways, one of the ways I recently learnt is to memoize child components so that they do not re render with context changes.

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

    Thanks for the new video, eagerly waiting for your videos

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

    Awesome content bro! I suggest you create playlist by subject so it will be easier to find content in your channel

  • @l.e.nichols9382
    @l.e.nichols9382 3 роки тому +1

    How do you send a new value up back to the parent using UseContext?

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

      Just use: const [count, setCount] = useContext(CountContext) in a Child5 component , and it will "set" count State in a Child1...

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

    Are you planning to do a tuto on portals, fowards and useRef? This is hard to find good tutorial on these subjects :(

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

    Hey Laith, might want to use "outline: 0.1rem; " for all your Child components next time to avoid that weird black border on the top-left of all your boxes. Just a tip!

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

    The best explanation, Superb! Thanks dude.

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

    how can we use context between two sibling components?

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

    such a great tutorial about useContext

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

    Watch from 11:40 for useContext bits.

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

      Actually, from 18:00 onwards.

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

    The problem I have with this (which is not a problem I have with redux) is that changing the context's state will re-render every component inside of the .Provider
    Do you know how to prevent this from happening? In your example, you only want to re-render Child1 and Child5

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

    Perfectly summed, so the CounterContex.Consumer isn't important?
    also lifting up state with useContext, does it work backward? (I mean you can send a function to get data at the end of the component)
    But the problem arrives, when you need to take data from a far away grandchild, lift it up to the App , and then send it to another distant branch

  • @sofian-_-7
    @sofian-_-7 3 роки тому

    You are the man Laith 👏👏👏

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

    This is Awesome! Great tuts & Thanks so much!

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

    Thank you. The exact content I wanted. Great content.

  • @Bartek-xm4uq
    @Bartek-xm4uq 2 роки тому

    Thanks for great explanation!

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

    really really good job. Thank you bro

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

    Loved this

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

    very precise and to -the -point video, love from india,keep up the good work
    and pls can u explain exactly why usecontext will not work in app.js?
    edit- i watch it again, now it's crystal clear

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

    شكرا يا باشا

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

    Nice explaination!! One doubt .... What if we want to change the value of the state that we are consuming in the child component ? How we can change it ? Do we need to pass the setCount function also using Provider ? Please answer me if anyone have the solution fir this doubt. Thanks

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

    Thanks, subscribed.

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

    amazing

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

    Made it clear 🙂

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

    Thank you

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

    18:05 useContext solution

  • @נירגונטמחר-י6ב
    @נירגונטמחר-י6ב Рік тому

    thinks bro!!!!

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

    I don't speak good English, but I would have understood this video if he hadn't spoken, Thx ❤

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

    so technically it's not global if it can only be passed down to child components..

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

    {2023-10-14}

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

    OMG bro u really didn't need to do all those illustration, lol..
    Nice video though

  • @2010giant
    @2010giant 3 роки тому

    I am not gay, but I love you.

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

    Thank youuuu

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

    thank you