Learn React Hooks: useState - Simply Explained!

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
In this video we will learn about React hooks, starting with useState. This powerful React hook will allow you to have state inside of functional components, and will allow you turn your static React applications into stateful ones. You will learn how to create state, how to set a default value, and how to update the state using useState in React.
In this new React world, hooks are here to stay, so it's best to learn them! In this tutorial I demonstrate the useState React hook, and I explain it very simply and in a way that is easy to understand. Enjoy!
Subtitles by Naveen G

[@cosdensolutions]

Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react

[@percyk6884]

Simple, quick, and efficient, thank you!

[@bbbeo8912]

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.

[@richardclifford583]

Very simplified explanation! Thanks!

[@rinshadrinshad3540]

Simple and detail Thanks For The Effort 🙌

[@zuperhache]

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

[@Nelson-fw5ly]

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

[@cosdensolutions]

Hahahaha yes exactly ☺️

[@bbbeo8912]

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

[@FursMars]

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

[@janemisshela]

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

[@alissoncamoes7113]

thank you for sharing, greetings from Brazil!

[@TEScompetitive]

Much appreciated, best tutorial out on this

[@tea2125]

You are an amazing teacher! Thank you!

[@mustafacoskun5208]

Thanks for clear and to the target explanation...

[@eunwoooscomics]

I loved this video keep up the good work

[@sarahwbas]

Thank You so much! your channel is underrated!

[@rohitindurke3549]

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

[@narcleptik]

Thank You, you are a good teacher.

[@Electro_69]

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

[@OXIDE777-is6gs]

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

[@cosdensolutions]

Yep 🤙

[@SR-zi1pw]

Great tutorial brother

[@rklintwo]

Solid tutorial. New subscriber here!

[@priyamjain01]

You are a saviour my friend 🙏

[@boukrimohammed]

i swear you're a life saver

[@rusliabdulgani9920]

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]

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

[@jasonadams1876]

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.

[@madipallynaveenkumar6811]

Nice one!... Liked it!

[@Adrianku]

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

[@jabiesorenson8271]

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

[@andrewchukwudumeje9413]

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

[@Salah-YT]

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

[@cosdensolutions]

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

[@manushadananjaya8125]

Thank you soo much this is so much better 😍

[@cosdensolutions]

glad you found it useful!

[@amalikmuhd]

well explained!!

[@GeraldPajulas]

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

[@clintonboamah6029]

Fantastic!😉

[@smurffronda2951]

Thank you!

[@amalkhardli]

great thank you!

[@Scotthutchinsonking]

this dude is awesome

[@kristiankristian4652]

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.

[@technologic4575]

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]

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]

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!

[@renejacques8288]

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

[@TheHumanistX]

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]

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

[@manushadananjaya8125]

Greetings Good luck! From Sri lanka❤

[@cosdensolutions]

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

[@prithivirajanv8146]

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

[@cosdensolutions]

Will do!

[@tufanalin]

Man I feel like Luka Doncic is teaching 😂

[@kaptainfreak6988]

thank u

[@avinashshiyani]

Nice

[@farahelaydi8474]

thank Youuu

[@abzz1290]

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

[@RobinsonDomingo-dy7xq]

do you have tutorial that all hook can be use?

[@zuperhache]

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

[@Smartroid]

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]

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

[@kadirmemisoglu343]

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

[@webb-developer]

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

[@cosdensolutions]

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]

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]

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!

[@Adam-zg7cv]

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.

[@sheshankkumar1184]

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

[@cosdensolutions]

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]

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.

[@Abc-me2cx]

hello

[@ariyoujahan9662]

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]

This is my first ever video my dude ☺️

[@userre85]

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

[@shaxzodsharipov6622]

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

[@cosdensolutions]

Discord