Learn React Hooks: useState - Simply Explained!

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

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

  • @cosdensolutions
    @cosdensolutions  7 месяцев назад +2

    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 Месяц назад

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

  • @bbbeo8912
    @bbbeo8912 9 месяцев назад +4

    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.

  • @CMOMKARSHELKECM
    @CMOMKARSHELKECM 3 месяца назад +3

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

  • @percyk6884
    @percyk6884 11 месяцев назад +6

    Simple, quick, and efficient, thank you!

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

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

  • @zuperhache
    @zuperhache 7 месяцев назад

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

  • @Nelson-fw5ly
    @Nelson-fw5ly 11 месяцев назад +72

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

    • @cosdensolutions
      @cosdensolutions  11 месяцев назад +10

      Hahahaha yes exactly ☺️

    • @bbbeo8912
      @bbbeo8912 9 месяцев назад +1

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

  • @mission-DIY
    @mission-DIY 2 месяца назад

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

  • @janemisshela
    @janemisshela 5 месяцев назад

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

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

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

  • @sgtkang2
    @sgtkang2 Месяц назад

    Oh my.. you explain it so well!

  • @shortsofsomeone
    @shortsofsomeone 5 месяцев назад

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

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

    thank you for sharing, greetings from Brazil!

  • @tea2125
    @tea2125 7 месяцев назад

    You are an amazing teacher! Thank you!

  • @sarahwbas
    @sarahwbas 7 месяцев назад

    Thank You so much! your channel is underrated!

  • @Electro_69
    @Electro_69 5 месяцев назад

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

  • @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

  • @OXIDE777-is6gs
    @OXIDE777-is6gs Год назад +2

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

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

    Simple and detail Thanks For The Effort 🙌

  • @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

  • @richardclifford583
    @richardclifford583 10 месяцев назад

    Very simplified explanation!
    Thanks!

  • @metcaelfe
    @metcaelfe 3 месяца назад

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

  • @deyonyt
    @deyonyt Месяц назад +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  Месяц назад

      fair enough, this was my first ever video though 😅

  • @rusliabdulgani9920
    @rusliabdulgani9920 9 месяцев назад +5

    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 9 месяцев назад

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

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

      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.

    • @Thekidisalright
      @Thekidisalright Месяц назад

      I was actually surprise he just use (count + 1) instead of update the count with recentCount instead

  • @TPactivities
    @TPactivities Месяц назад

    best tutorial i have se in a while

  • @priyamjain01
    @priyamjain01 5 месяцев назад

    You are a saviour my friend 🙏

  • @boukrimohammed
    @boukrimohammed 7 месяцев назад

    i swear you're a life saver

  • @andrewchukwudumeje9413
    @andrewchukwudumeje9413 6 месяцев назад

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

  • @mustafacoskun5208
    @mustafacoskun5208 9 месяцев назад

    Thanks for clear and to the target explanation...

  • @GeraldPajulas
    @GeraldPajulas 9 месяцев назад

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

  • @narcleptik
    @narcleptik 10 месяцев назад

    Thank You, you are a good teacher.

  • @TEScompetitive
    @TEScompetitive 11 месяцев назад

    Much appreciated, best tutorial out on this

  • @jabiesorenson8271
    @jabiesorenson8271 8 месяцев назад

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

  • @technologic4575
    @technologic4575 9 месяцев назад +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 9 месяцев назад

      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.

  • @RobixYTT-nu4ug
    @RobixYTT-nu4ug 10 месяцев назад

    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!

  • @enochdollar-bill3306
    @enochdollar-bill3306 2 месяца назад

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

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

    Greetings Good luck! From Sri lanka❤

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

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

  • @Adrianku
    @Adrianku 10 месяцев назад

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

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

    I loved this video keep up the good work

  • @renejacques8288
    @renejacques8288 8 месяцев назад

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

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

    Nice one!... Liked it!

  • @kristiankristian4652
    @kristiankristian4652 10 месяцев назад +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.

  • @zuperhache
    @zuperhache 7 месяцев назад

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

  • @lll-vq6pm
    @lll-vq6pm 3 месяца назад

    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 ❤️

  • @Scotthutchinsonking
    @Scotthutchinsonking 10 месяцев назад

    this dude is awesome

  • @SR-zi1pw
    @SR-zi1pw Год назад

    Great tutorial brother

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

    Solid tutorial. New subscriber here!

  • @smurffronda2951
    @smurffronda2951 11 месяцев назад

    Thank you!

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

    Thank you soo much this is so much better
    😍

  • @abzz1290
    @abzz1290 9 месяцев назад

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

  • @amalkhardli
    @amalkhardli 10 месяцев назад

    great thank you!

  • @clintonboamah6029
    @clintonboamah6029 6 месяцев назад

    Fantastic!😉

  • @amalikmuhd
    @amalikmuhd 10 месяцев назад

    well explained!!

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

    Man I feel like Luka Doncic is teaching 😂

  • @kadirmemisoglu343
    @kadirmemisoglu343 11 месяцев назад +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

  • @unucooper3602
    @unucooper3602 3 месяца назад

    thank uuu

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

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

  • @RobinsonDomingo-dy7xq
    @RobinsonDomingo-dy7xq 6 месяцев назад

    do you have tutorial that all hook can be use?

  • @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!

  • @mazthespaz1
    @mazthespaz1 2 месяца назад

    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?

  • @kaptainfreak6988
    @kaptainfreak6988 9 месяцев назад

    thank u

  • @Adam-zg7cv
    @Adam-zg7cv 5 месяцев назад

    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.

  • @avinashshiyani
    @avinashshiyani 9 месяцев назад

    Nice

  • @webb-developer
    @webb-developer 8 месяцев назад

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

    • @cosdensolutions
      @cosdensolutions  8 месяцев назад

      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

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

    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  Год назад +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 11 месяцев назад

    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  11 месяцев назад

      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 11 месяцев назад

      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.

  • @ariyoujahan9662
    @ariyoujahan9662 11 месяцев назад +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  11 месяцев назад

      This is my first ever video my dude ☺️

    • @userre85
      @userre85 6 месяцев назад

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

  • @yousufrumi5587
    @yousufrumi5587 3 месяца назад

    zoom in your code screen

  • @Abc-me2cx
    @Abc-me2cx 8 месяцев назад

    hello

  • @itxchiii
    @itxchiii 23 дня назад

    whole lotta capping in the intro, the video is clear but thats not everything about useState().

  • @sachinkhatri1077
    @sachinkhatri1077 3 месяца назад

    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