Learn to use State in React in 19 minutes (for beginners)

🚨 Join the world’s BEST developer community “Zero to Full Stack Hero”: www.papareact.com/course
📩 Want coding problems (with solutions!) delivered to your inbox daily? www.papareact.com/dailycoding...
This video is designed to get you familiar with the React useState Hook where we cover topics such:
👉 What is the useState Hook?
👉 What does it allow us to do?
👉 Where state is supported!
👉 Build a counter app using state!
🔴 LOOKING FOR THE CODE? 🛠️
links.papareact.com/github
👇🏻FOLLOW ME HERE:
Instagram: links.papareact.com/instagram
Facebook: links.papareact.com/facebook
LinkedIn: links.papareact.com/linkedin
Twitter: links.papareact.com/twitter
Discord: links.papareact.com/discord
Newsletter: links.papareact.com/newsletter
💰 WANT TO SUPPORT THE CHANNEL?
Donate here: links.papareact.com/donate
Grab some PAPA Merch: links.papareact.com/merch
🕐 TIMESTAMPS:
00:00 Intro
00:17 Skillshare Sponsorship
01:57 Introduction to the useState Hook
02:54 Building a counter app using State
05:04 Explaining State
05:51 Implementing the useState Hook
09:20 Non persistent State explanation
09:54 Building counter in a Class Based Component
16:41 Async explanation and demo
18:40 Summary
19:06 Outro
Let’s get it PAPAFAM 🔥.
#react #useState #javascript

Пікірлер: 129

  • @SonnySangha
    @SonnySangha Жыл бұрын

    📬Do you want DAILY coding problems sent DIRECTLY to your Inbox? (with solutions the next day) 👉 links.papareact.com/university

  • @avneesh0612
    @avneesh06122 жыл бұрын

    The new intro is sickkk

  • @eyosiyas_js

    @eyosiyas_js

    2 жыл бұрын

    Yeaaaaaaa

  • @c9m853
    @c9m8532 жыл бұрын

    Hi Sonny, i want to thank you from my bottom of my heart. With you and your videos i managed to do my last year license project and got an internship in a web development company . Now i am focusing on working hard and grow. You are awesome, can't wait for your next video.

  • @connorhodgson3873
    @connorhodgson38732 жыл бұрын

    Hey sonny. Just wanted to say how much I appreciate you sharing your knowledge with us. I am a beginner aspiring web developer, more interested in the front end but also know it is important to learn a lot of the back end too these days. All of this seems impossible to learn right now but I know if I stick it out it will be worthwhile in the end. Any advice you have would be appreciated! Thanks again

  • @achtube85
    @achtube852 жыл бұрын

    FINALLY a video that uses a simple example to show how to transition from Class to Functional. This is so freaking useful. Blessed!!!

  • @jons_RoadtoCode

    @jons_RoadtoCode

    Жыл бұрын

    Yes exactlly! what a struggle is been to get this clarified! As someone who spent days on vanilla JS creating a counter app (LOL), I really appreciated how Sonny compared the two. Understanding useState finally clicked for me with this teaching method. Welp, this is my first video watched from Sonnys huge playlist, time to apply what I've learned and then check out some more :)

  • @itsgojoverfr

    @itsgojoverfr

    10 ай бұрын

    @@jons_RoadtoCode hey jons it's been 6 months, have you landed a job or are you still learning?

  • @jons_RoadtoCode

    @jons_RoadtoCode

    10 ай бұрын

    Hey@@itsgojoverfr ! I'm still on the self-taught learning path, I've come quite a long way from the 6 month old post and I thank you for the follow up! I have not applied for any jobs yet, I'm still not 100% confident I'm well rounded enough to bring value to an entry level role just yet. I am working on a full stack pet project, I found this to be the best way to learn although it certainly has taken its toll on me, mentally and time-wise. It's been great so far since I've now learned how to create a front end with React, backend with Node.js and calling API's from the db, in my case, MySql (with MySql Workbench). I took a 2 week break but am getting back to it today actually. My goal is to start applying for jobs in 2024, being that I am self-taught and work in an unrelated field, I'll need at least some full stack projects in my portfolio to substitute the lack of formal education and experience. I'd be interested to hear about your current journey?

  • @inspisiavideos8542
    @inspisiavideos85422 жыл бұрын

    Sonny Shanga I had an internship as QA this Summer. They interviewed me again this past Wednesday and they will extend me the paid internship only this time it will be as React Engineer until the end of the year. The company protects Hospitals data (that’s all I’m saying). They liked the amazon and the airbnb clone I did from your channel. They told me they don’t have open positions for entry level but there might be some available later this year. Thanks man

  • @vibhukumar3806
    @vibhukumar38062 жыл бұрын

    The best REACT channel out there by quite a margin. Keep up the good work🔥

  • @enfieldli9296
    @enfieldli92962 жыл бұрын

    State is the react way of definning variable, this is so refreshing!

  • @TinyMaths
    @TinyMaths11 ай бұрын

    Just come across your channel (I think) and liking the way you explain things. After just over a year of leaning JavaScript and building many projects, I decided last week to take the plunge and begin learning React. Looks like I'll be frequenting your channel quite a bit.

  • @lalasmith2137
    @lalasmith21372 жыл бұрын

    Hey Sonny, new subscriber here- been binge watching all the challenges and trying for myself and the clones you built - just incredible and amazing that i found your channel. May i ask for some advanced projects as well? maybe with more focus on logic, form validations, server side requests just to learn the best practices from you! much love

  • @CoderSineNomine
    @CoderSineNomine Жыл бұрын

    Here i am after almost 5 confusing videos, finally got it! subscribed and looking forward for more.. thanks Sonny!

  • @abhijeetmokale5604
    @abhijeetmokale56042 жыл бұрын

    Bro! Your way of explaining things is #awesome ! After all this time ,Now I feel confident in states!! Glad you started making this lesson videos.

  • @eyoeltekle
    @eyoeltekle2 жыл бұрын

    What a nice tutorial bro, I was struggling to understand this concept because most tutorials use complex examples this though was brilliant, tnxs

  • @frogonajetski
    @frogonajetski2 жыл бұрын

    This is THE best video explanation I have seen on this. Thank you so much. I totally understand now.

  • @bikramrumba3463
    @bikramrumba34632 жыл бұрын

    I truly appreciate you for being there. Keep rocking!!

  • @mohibkhan2492
    @mohibkhan24922 жыл бұрын

    Great video Sonny, please make a detailed video on useContext hook. Thanks

  • @jesper391

    @jesper391

    2 жыл бұрын

    I agree

  • @yaeldekanu9246
    @yaeldekanu9246 Жыл бұрын

    Great job! You do a great job explaining everything

  • @DevlogBill
    @DevlogBill Жыл бұрын

    Wow I'm happy I began learning React after Hooks came out versus a class system, thank you for sharing.

  • @roshanguragain5578
    @roshanguragain55782 жыл бұрын

    I just found your channel and I can't control myself to say you are awesome. Anyway happy teachers day. Love you 💘

  • @berad6034
    @berad60342 жыл бұрын

    Best explanation on KZread. You're the man. Liked and subscribed

  • @BenOdari
    @BenOdari2 жыл бұрын

    Sonny You be crowned the God of Reactjs I learn alot from This Channel...Lots of Love from Kenya

  • @crappycoders
    @crappycoders Жыл бұрын

    Yep thats what i needed before going to building the apps

  • @edwarda7096
    @edwarda70962 жыл бұрын

    Thanks Sonny! Would love a video or two using React-Spring in an app

  • @emmanuelmanana1527
    @emmanuelmanana15272 жыл бұрын

    lessons from the master, brilliant

  • @salarhashemian3436
    @salarhashemian34362 жыл бұрын

    Keep up the good work man this video was really help full

  • @optimusworld
    @optimusworld5 ай бұрын

    Thanks alot, your teaching was easy to understand.

  • @jimmyopot1972
    @jimmyopot19722 жыл бұрын

    Very informative, well understood useState hook.

  • @privatesoul
    @privatesoul3 ай бұрын

    Best video explanation I've ever seen. Your videos are legit, man.

  • @atharvavetal453
    @atharvavetal4532 жыл бұрын

    This gus is so much hardworking he is even working on his holidays wow manh thats great ❤️

  • @atharvavetal453

    @atharvavetal453

    2 жыл бұрын

    @@AtulKumar-jq7tw ik but he is focusing

  • @murtazaali5083
    @murtazaali50832 жыл бұрын

    Hi, Sonny great content. Highly recommend to make a react tutorial playlist. Cheers

  • @informatyx1
    @informatyx12 жыл бұрын

    You always provide valuable content ❤️❤️

  • @luclekene8592
    @luclekene85922 жыл бұрын

    thank you so mush i love your work

  • @passsacaglia
    @passsacaglia2 жыл бұрын

    PAPAFAM here!

  • @devislight
    @devislight2 жыл бұрын

    Thank you so much 👨‍🏫🙋‍♂️

  • @srinivasaraoyp3640
    @srinivasaraoyp36402 жыл бұрын

    Very interesting video. Thank you.

  • @georgeyvb4460
    @georgeyvb44602 жыл бұрын

    Hey a Trello clone would be cool, specially the drag n drop with auth and saving the data to a database with Nextjs

  • @juhiojha2050
    @juhiojha20502 жыл бұрын

    your videos have so clearty..........your videos are amezing .......... :)

  • @dx497
    @dx4972 жыл бұрын

    I Love you Sonny superb tutorial 🚀🚀

  • @nguyenbriton4263
    @nguyenbriton42632 жыл бұрын

    Great video, can you do a tutorial for Redux too?

  • @xperwar
    @xperwar8 ай бұрын

    love the content !!

  • @farhanmaqsood9498
    @farhanmaqsood94982 жыл бұрын

    You are amazing papa react Can you please make full tutorial on react js

  • @ruebenhales8558
    @ruebenhales8558 Жыл бұрын

    Great content!

  • @boujeeblackbabe2.0
    @boujeeblackbabe2.02 жыл бұрын

    Thanks!!

  • @swayampravodasgupta2956
    @swayampravodasgupta29562 жыл бұрын

    Dropped in for my monthly show of gratitude

  • @nimasherpa8608
    @nimasherpa86082 жыл бұрын

    Your videos are awesome

  • @theetechverge7723
    @theetechverge77232 жыл бұрын

    So dope Mr #papareact!!! #papafamforever much love....

  • @M.W__
    @M.W__ Жыл бұрын

    thank you SO SO much

  • @anaskhan4841
    @anaskhan48412 жыл бұрын

    Love you man

  • @arjunjoshi3481
    @arjunjoshi34812 жыл бұрын

    Ayyy intro in Dubaiiii. Niceeeeee

  • @martinkristofferssonn
    @martinkristofferssonn Жыл бұрын

    Great video! Please don't use vocals in your background music. It makes it sometimes hard to focus on what you are saying.

  • @markj.voltaire5620
    @markj.voltaire56202 жыл бұрын

    great explanation

  • @Bannords
    @Bannords2 жыл бұрын

    Ты крутой, спасибо! I mean you are super rockstar)) thanks for guide)

  • @Arabian_Epileptic
    @Arabian_Epileptic2 жыл бұрын

    Nice sunny. I see that Dubai tan! 😁🎉

  • @bsal5347
    @bsal53472 жыл бұрын

    Nobody can teach react better than the papa.

  • @shopsrise5137
    @shopsrise51372 жыл бұрын

    Thanku ❤ #PAPAfam New video from Dubai 😌🔥

  • @lexsemenenko7044
    @lexsemenenko70442 жыл бұрын

    What's a good way to update a nested property of an object in useState? My state stores an object with a property that holds an array. I need to update array items. The way I am doing it now is to clone the whole object, do the update, and then put the whole updated object back into useSate. Appreciate!

  • @azad9655
    @azad96552 жыл бұрын

    Hey sonny, Make a video on Rest Api with React. Some of the APIs are very nested. not so easy to use. Would love to see how you manage the API

  • @oxydoum
    @oxydoum2 жыл бұрын

    Thanks bro, do you know how to do a waveform in a audio player with react?

  • @zstudio6127
    @zstudio61272 жыл бұрын

    Boom Sony!!.. Love from BD

  • @mohibkhan2492
    @mohibkhan24922 жыл бұрын

    I remember this module was in skillshare 101 modules!

  • @juansebastianvalenciajimen2751
    @juansebastianvalenciajimen27512 жыл бұрын

    Sonny great intro that you have bro

  • @Saur3n
    @Saur3n2 жыл бұрын

    yoo sonny you are the best :)

  • @govindbchandran8681
    @govindbchandran86812 жыл бұрын

    Somehow didn't get the actual sonny sangha vibe. Maybe the music and the hype and stuff we get in livestreams. Great vid tho 😁

  • @mykesoftware3044
    @mykesoftware30442 жыл бұрын

    Long time bruh🤩React native project man.Bell is on

  • @tapanranipa
    @tapanranipa2 жыл бұрын

    Hey dude please make a video on usereducer hook it is very complex in terms of how to use it and under which scenarios?? Please make a damn awesome video about it like you always make other ones 😂😂😂

  • @JoonasKarp
    @JoonasKarp2 жыл бұрын

    Could you possibly make tutorial on how to test react using Jest ?

  • @martumbao2760
    @martumbao27602 жыл бұрын

    Hi, Sonny can you have a discount for the price for other country. Because the euro value for us is too expensive. And I just wanna thank you for your tutorials. It is very useful and easy to understand with your approach.

  • @timileyinquadri8668
    @timileyinquadri8668 Жыл бұрын

    Hello sonny, you mentioned something about making state persistent with a database, how does this work…or if anyone knows how kindly share, because I have a toggle button that makes a call to an endpoint and every time I refresh the page or go to another tab in the app it resets back to the default

  • @mitotv6376
    @mitotv637610 ай бұрын

    Nice video

  • @lawrencemotions8720
    @lawrencemotions87202 жыл бұрын

    love this is there any mongo db content coming .

  • @juansebastianvalenciajimen2751
    @juansebastianvalenciajimen27512 жыл бұрын

    Remember guys that we can create our hooks called custom hooks, these custom hooks help us to share the logic for differents components

  • @pawanbhatt3847
    @pawanbhatt38472 жыл бұрын

    Nice sir

  • @cryptomallu6271
    @cryptomallu6271 Жыл бұрын

    best video

  • @karanjoshi12
    @karanjoshi122 жыл бұрын

    Please please please on complete dedicated video on redux (tips and tricks) to learn in (like you taught context API in Amazon clone)

  • @akhileshmishra5559
    @akhileshmishra55592 жыл бұрын

    Please sonny make one comment section with nested reply like and dislike system using usereducer and context please....👍👍

  • @deepaknegi4317
    @deepaknegi43172 жыл бұрын

    Hello, could you explain how to update multiple state variables depending on one another in functional Components like in-class components we can pass back a callBack to this.setState, we callback will update the state after it. in class component--> this.state ={count:0,ans:1} this.setState((prev)=>{return {...prev, count : count+1}},(prev)=>{return {...prev, ans: count * 2}}); in this way first "count" will be updated and then "ans" will be updated. How to achieve the same with functional components. in functional component--> const [count, setCount] = useState(0); const [ans, setAns] = useState(1); setCount(prev=>prev+1); setAns(prev=>count * 2); but as state updation is an async process then "setAns" could have old value of "count" i.e 0;

  • @manasahr478
    @manasahr478 Жыл бұрын

    How to fetch data from api and how to create dropdown using fetched data.how to call function using selected option. Could you pls help me

  • @Divyam2600
    @Divyam26002 жыл бұрын

    #papafam #papareact #sonnysanghe excitingly waiting for your new ui clone challenge as I have come up to this field recently in this month and started your amazon challenge which i am going to finish.. #amazonchallenge

  • @Faysal-Mridha
    @Faysal-Mridha2 жыл бұрын

    We are PapaFam 🥳

  • @mkilphewer2425
    @mkilphewer24252 жыл бұрын

    Iam a newbie The doubt i have is,in this video when u created a class based component and then import it in index.js..what u did is import app from (its location)...but the name of the component was not app right?..it was "appclass"..then how did it display it in the browser without any error..and even when u render the component in index.js..u simply wrote ..shouldn't it be ? Iam totally a beginner..need help

  • @TarunSingh24
    @TarunSingh242 жыл бұрын

    PLease make tutorial like this for - useEffect

  • @godfataliti
    @godfataliti2 жыл бұрын

    Agradecido con el de arriba 😊

  • @thirdojohnson4325
    @thirdojohnson43252 жыл бұрын

    I really wished this guy taught python. Damn you are a good teacher

  • @swamini.pandit

    @swamini.pandit

    2 жыл бұрын

    Module not found: Can't resolve 'firebase' in please solution

  • @charuwaka1
    @charuwaka12 жыл бұрын

    please make tutorial on useEffect with same example

  • @niravrk5446
    @niravrk54462 жыл бұрын

    Wait for next video

  • @crictube360
    @crictube3602 жыл бұрын

    Owsmmm sir

  • @tauraikuvarega1580
    @tauraikuvarega15802 жыл бұрын

    can you do a class-based component tutorial

  • @drphil2424
    @drphil24242 жыл бұрын

    PAPA SONNY WE LOVE YOU

  • @jonroni5756
    @jonroni5756 Жыл бұрын

    Hello Sir! I have problem in useState: import React, {useState} from 'react' function App(){ var [data, dataUpdate]=useState(0); function change(){ dataUpdate(data+1); } return ( {data} change()}>Click Here ) } export default App Whenever i used useState it shows me the blank page after execution

  • @lukas.webdev

    @lukas.webdev

    Жыл бұрын

    Try changing it to: Click Here 😉

  • @familythestephens9739
    @familythestephens97392 жыл бұрын

    Make a desk setup video pls?!?!?!

  • @eriksark2102
    @eriksark21022 жыл бұрын

    Please do a react native snapchat clone! you're amazing

  • @mohammedsafwans1153
    @mohammedsafwans11532 жыл бұрын

    Newsletter fam, where you at???

  • @dipanjandas9463
    @dipanjandas94632 жыл бұрын

    Create a video about login form in React js.

  • @ekansh03
    @ekansh032 жыл бұрын

    Couldn't understand it better.

  • @hasanahmed9917
    @hasanahmed99172 жыл бұрын

    do a tutorial on redux thunk or redux saga using the redux toolkit

  • @fayasahamed5587
    @fayasahamed55872 жыл бұрын

    If you teach axois and formik for validation

  • @sardarjahan9064
    @sardarjahan90642 жыл бұрын

    Hi Sonny ,make some video on redux ,it will help us to grab some shit about react

  • @bernardmuchemi196
    @bernardmuchemi196 Жыл бұрын

    We've never seen your lefts side of the face Sonny😂😂

  • @aryan7069_
    @aryan7069_2 жыл бұрын

    I saw you teaching clever programmer then came to your channel lol

  • @hasanahmed9917
    @hasanahmed99172 жыл бұрын

    please do a crm project