Learn React Hooks: useState - Simply Explained!

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

КОМЕНТАРІ • 94

  • @cosdensolutions
    @cosdensolutions  5 місяців тому +1

    Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc

    • @Infotainment-cb6cy
      @Infotainment-cb6cy 11 днів тому

      You explained nothinng
      const [count, setCount] = useState(0);
      still does not make any sense at all.

  • @CMOMKARSHELKECM
    @CMOMKARSHELKECM Місяць тому +3

    The way you teach react tells how experienced you are
    Keep uploading videos

  • @bbbeo8912
    @bbbeo8912 8 місяців тому +2

    Hi Cosden, I have been working with Angular for years and now I'm learning React to enrich my skillset as a front end developer.
    Your videos is always concise and easy to understand that help me to save a lot of time.
    Thank you so much.

  • @gshock1485
    @gshock1485 19 днів тому +1

    really appreciate the small videos explaining big concepts so well but i think you should have talked about the asynchronous nature of useState here. in real world applications, more often than not ive gotten stumped by this async nature where the state just wont update! would really appreciate a video on that, if possible!

    • @cosdensolutions
      @cosdensolutions  19 днів тому

      fair enough, this was my first ever video though 😅

  • @Nelson-fw5ly
    @Nelson-fw5ly 10 місяців тому +67

    so because of useState(), I can click the 'Like' button on this video and the like counter can increment? 😆

    • @cosdensolutions
      @cosdensolutions  10 місяців тому +8

      Hahahaha yes exactly ☺️

    • @bbbeo8912
      @bbbeo8912 8 місяців тому

      Then click on it again to test the decrement :))
      Lol j4f don't do that haha

  • @sgtkang2
    @sgtkang2 11 днів тому

    Oh my.. you explain it so well!

  • @rusliabdulgani9920
    @rusliabdulgani9920 8 місяців тому +4

    the setState is tricky, cause if you do like that (setCount(count + 1) ) and when there is another async process that change the state, the value will not valid.. you should use this approach setCount(recentCount => recentCount + 1 ) it will using recent value and calculate it.

    • @rusliabdulgani9920
      @rusliabdulgani9920 8 місяців тому

      so if there is any recent value involve, please make sure using this approach (using callback), rather than directly inject state

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

      Yes, this is correct. It's nice that this video present this as simply as possible, but doing things the way it's presenting is going to set devs up for future confusion and problems.

  • @TPactivities
    @TPactivities 10 днів тому

    best tutorial i have se in a while

  • @percyk6884
    @percyk6884 10 місяців тому +5

    Simple, quick, and efficient, thank you!

  • @mission-DIY
    @mission-DIY Місяць тому

    I like the way you explain things that other videos do not explain, such is the naming conventions! Great work. Subscribed!

  • @zuperhache
    @zuperhache 6 місяців тому

    finally !! after watching 1000s of videos, a dude that explains! clearly how the hooks work, thank you ! 🙏💪

  • @spongebobsquarepants4576
    @spongebobsquarepants4576 2 місяці тому

    bro, this is seriously the best explanation on youtube. Please keep them coming!

  • @rohitindurke3549
    @rohitindurke3549 4 місяці тому

    Really, this was my last tutorial for using the state hook. Thanks for your effort.💗

  • @Electro_69
    @Electro_69 4 місяці тому

    Daaaaamn you are a god or what, i wasted my 5 hours on this and you taught me in 10 minutes, salute man

  • @technologic4575
    @technologic4575 8 місяців тому +2

    Nice video but I was expecting that you could explain more about the difference between using function to set a state ex. instead of setCount(count + 1) others are using setCount(prevState => prevState + 1)

    • @rusliabdulgani9920
      @rusliabdulgani9920 7 місяців тому

      cause setState function is async process, so the React do not guarantee that if you use this approach (setCount(count + 1)) it will always correct, so react give you saver approach (setCount(callback)) to make sure your function to set the state will be always correct.

  • @janemisshela
    @janemisshela 4 місяці тому

    You simplified the complexity of this concept! Thanks so much!

  • @FursMars
    @FursMars 11 місяців тому +1

    You are the best teacher! Thank you for you real help and your tami and work!!!

  • @Salah-YT
    @Salah-YT Рік тому +6

    Lovely job, bro! Subscribed and liked. Please cover each hook individually and create a list, it would be awesome. Thanks a lot! 😍👍

    • @cosdensolutions
      @cosdensolutions  Рік тому +2

      There's a playlist already ☺️ but yes planning to do all of them

  • @OXIDE777-is6gs
    @OXIDE777-is6gs Рік тому +2

    Awesome!!! please do more of those on other React subjects🙏

  • @kristiankristian4652
    @kristiankristian4652 9 місяців тому +1

    ok, yes that's a simple example, but should to mention about "prev" because an App going to be crashed once when we change many useStates in the same time.

  • @TheHumanistX
    @TheHumanistX Рік тому +5

    Enjoying your channel. Subscribed. I have seen a few times people mention (usually using this counter example) that was should do something like `setCount(prevState => prevstate + 1)`
    I can't remember the reasoning for this but it had something to do with the state properly updating? Do you know what I am talking about and could you disucss that? Is it needed? Why do we do this instead of just `setCount(count + 1)`?

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

      Doing it that way is a way to guarantee you're getting the most up to date state, which sometimes is harder to get because of how React renders work. Search examples for this online and you'll see why

  • @lll-vq6pm
    @lll-vq6pm Місяць тому

    Sir can you instead show us how to use useState in manipulating DOM elements or classes. That would be more helpful to us beginners who is more into designing our react apps as an aspiring frontend dev.. just suggesting thankyou for your videos ❤️

  • @enochdollar-bill3306
    @enochdollar-bill3306 Місяць тому

    made it make too much sense, i think imma watch ur playlist now

  • @renejacques8288
    @renejacques8288 7 місяців тому

    I guess you were right; I do have a better understanding of useStates now. What gets me is the word interface you used.

  • @alissoncamoes7113
    @alissoncamoes7113 11 місяців тому +1

    thank you for sharing, greetings from Brazil!

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

    You are a saviour my friend 🙏

  • @rinshadrinshad3540
    @rinshadrinshad3540 11 місяців тому +1

    Simple and detail Thanks For The Effort 🙌

  • @tea2125
    @tea2125 5 місяців тому

    You are an amazing teacher! Thank you!

  • @sarahwbas
    @sarahwbas 6 місяців тому

    Thank You so much! your channel is underrated!

  • @metcaelfe
    @metcaelfe Місяць тому

    Subbed, your videos and explanations are fantastic! Thank you!

  • @boukrimohammed
    @boukrimohammed 6 місяців тому

    i swear you're a life saver

  • @RobixYTT-nu4ug
    @RobixYTT-nu4ug 9 місяців тому

    Thanks for the video and for the taking the time to explain how useState works. It is so damn simple. Now, I am going to teach this to my mentees. They won't know that this is me as I am not using my real name,. hahaha! Thanks a lot!

  • @GeraldPajulas
    @GeraldPajulas 8 місяців тому

    Thank you for this. I understand the useState now hahaha😆😆

  • @richardclifford583
    @richardclifford583 8 місяців тому

    Very simplified explanation!
    Thanks!

  • @andrewchukwudumeje9413
    @andrewchukwudumeje9413 5 місяців тому

    I love the explanation bro
    Thanks a lot
    Keep up the good work

  • @mustafacoskun5208
    @mustafacoskun5208 8 місяців тому

    Thanks for clear and to the target explanation...

  • @narcleptik
    @narcleptik 9 місяців тому

    Thank You, you are a good teacher.

  • @TEScompetitive
    @TEScompetitive 9 місяців тому

    Much appreciated, best tutorial out on this

  • @jabiesorenson8271
    @jabiesorenson8271 6 місяців тому

    Just subbed cause I like the way you describe things good job

  • @manushadananjaya8125
    @manushadananjaya8125 11 місяців тому

    Greetings Good luck! From Sri lanka❤

    • @cosdensolutions
      @cosdensolutions  11 місяців тому

      thank you! love sri lanka :D colombo is a great city

  • @amalkhardli
    @amalkhardli 8 місяців тому

    great thank you!

  • @eunwoooscomics
    @eunwoooscomics 11 місяців тому +1

    I loved this video keep up the good work

  • @kadirmemisoglu343
    @kadirmemisoglu343 9 місяців тому +2

    I like your video but you did not mention about preVal in state. I think this is so important that you can not avoid to mention

  • @Adrianku
    @Adrianku 8 місяців тому

    just WOW! this was really helpful! thanks! new sub here

  • @Scotthutchinsonking
    @Scotthutchinsonking 9 місяців тому

    this dude is awesome

  • @Adam-zg7cv
    @Adam-zg7cv 4 місяці тому

    I suggest editing this video and adding an important concept.
    For example, why do you need the hook in the first place? I mean why don't you just use a JS variable instead?
    setState causes the whole component to be re-rendered.
    You cannot fully understand without fully understanding the component lifecycle.

  • @madipallynaveenkumar6811
    @madipallynaveenkumar6811 2 місяці тому

    Nice one!... Liked it!

  • @mazthespaz1
    @mazthespaz1 Місяць тому

    but you didn't say how the rest of the program gets access to the count value. should the count functions broadcast messages when count has changed?

  • @manushadananjaya8125
    @manushadananjaya8125 11 місяців тому

    Thank you soo much this is so much better
    😍

  • @zuperhache
    @zuperhache 6 місяців тому

    by the way, what is your opinion on AI, copilot for example, Is it worth it to keep learning how to code?

  • @abzz1290
    @abzz1290 8 місяців тому

    Great.
    How to handle multiple or object and array in useState?

  • @SR-zi1pw
    @SR-zi1pw Рік тому

    Great tutorial brother

  • @unucooper3602
    @unucooper3602 Місяць тому

    thank uuu

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

    can u also make a video on how react re-renders when usestate state is changed and how does useState use object.is() under the hood

    • @cosdensolutions
      @cosdensolutions  Рік тому +2

      That's a bit of an advanced topic 😅 I'm still doing beginner videos so it'll take some time!

  • @avinashshiyani
    @avinashshiyani 8 місяців тому

    Nice

  • @kaptainfreak6988
    @kaptainfreak6988 8 місяців тому

    thank u

  • @clintonboamah6029
    @clintonboamah6029 5 місяців тому

    Fantastic!😉

  • @smurffronda2951
    @smurffronda2951 10 місяців тому

    Thank you!

  • @RobinsonDomingo-dy7xq
    @RobinsonDomingo-dy7xq 5 місяців тому

    do you have tutorial that all hook can be use?

  • @amalikmuhd
    @amalikmuhd 9 місяців тому

    well explained!!

  • @webb-developer
    @webb-developer 7 місяців тому

    what's the different between using a state and using a normal variable and reassigning it ?

    • @cosdensolutions
      @cosdensolutions  7 місяців тому

      State triggers a re-render of the component so you can see the new value in the UI, variable assigning will not work consistently in React

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

    hi, thanks... You are awesome... Make more videos

  • @tufanalin
    @tufanalin 4 місяці тому +1

    Man I feel like Luka Doncic is teaching 😂

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

    Solid tutorial. New subscriber here!

  • @ariandane7631
    @ariandane7631 11 місяців тому

    Thank you. Why wouldn’t you just set a variable count and have a function that adds 1 and have the button call the function? I’m new to react and use state.

    • @cosdensolutions
      @cosdensolutions  11 місяців тому +1

      because in React components, doing it that way wouldn't cause a re-render and your new value wouldn't show on the screen! You need state to trigger an update and then it will show!

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

    thank Youuu

  • @sheshankkumar1184
    @sheshankkumar1184 10 місяців тому

    Can you please make one video where we get to know difference between using useState hook instead of normal variables using let keyword

    • @cosdensolutions
      @cosdensolutions  10 місяців тому

      you should always use state for things that you want to track and update over time. The only use case for using something like a variable without state is when you want to derive something from state. But everything should be driven from state in React

    • @sheshankkumar1184
      @sheshankkumar1184 10 місяців тому

      understood but what happens when i use normal variables instead of State variables? I can use them seamlessly. While using state variables I face difficulty as they require a queue to call set functions. that is not the case with normal variables.

  • @yousufrumi5587
    @yousufrumi5587 2 місяці тому

    zoom in your code screen

  • @Abc-me2cx
    @Abc-me2cx 7 місяців тому

    hello

  • @ariyoujahan9662
    @ariyoujahan9662 10 місяців тому +1

    I love your videos, but i actually disliked this one.
    It wasn't like your other videos.
    Watching all those amazing video that covers every corners and addresses all edges cases made an expectation.
    But nuh, this wasn't one of those.
    Hope your create another video and address those as well.
    By the way thank you.

    • @cosdensolutions
      @cosdensolutions  10 місяців тому

      This is my first ever video my dude ☺️

    • @userre85
      @userre85 5 місяців тому

      He didn't introduce the
      setState(prev => prev+1)
      syntax

  • @sachinkhatri1077
    @sachinkhatri1077 2 місяці тому

    Hello sir i have double. Why can't we use count++ instead of count + 1 ????

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

    admin, i heve best offer for you . How can we talk