All React Hooks Explained in 2 Hours | Complete React Hooks Tutorial with Example 2024

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 พ.ย. 2024

ความคิดเห็น • 181

  • @GreatStackDev
    @GreatStackDev  5 หลายเดือนก่อน +18

    👉Get Certified for react hooks course: quiz.greatstack.dev/rhks

  • @vakyz5333
    @vakyz5333 3 หลายเดือนก่อน +19

    In my 2 years in React JS. This is my first time I understand react hooks really well. Thank you for your well explained tutorial.

    • @bonfaceosuka
      @bonfaceosuka หลายเดือนก่อน +2

      Hahahaa I once saw a meme about developers coding and not knowing what they were doing .

    • @vakyz5333
      @vakyz5333 หลายเดือนก่อน +5

      @@bonfaceosuka not all the project I went are using react hooks. In my previous jobs from 2019 to 2021. I just got started again to refresh my knowledge. My recent skill set is low code which is more convenient to implement than traditional. I understand your point. But laughing at me is not okay.

  • @Leesdjo
    @Leesdjo 5 หลายเดือนก่อน +16

    I heard this voice when I started learning HTML CSS and JavaScript and now I am still watching even though I am capable of creating apps on my own. I want to thank him for his input in my life as far as my career as web developer is concern.

    • @GreatStackDev
      @GreatStackDev  5 หลายเดือนก่อน +1

      I'm glad to hear that and proud to have you as our subscriber. Thanks for your comment. 😊

    • @Avontime
      @Avontime 3 หลายเดือนก่อน

      @Leesdjo Thats great. can you tell me how many year have you been learn web dev until now?

  • @rajesmaheshwari
    @rajesmaheshwari 4 หลายเดือนก่อน +16

    00:02 React hooks simplify functional components to work like class components
    03:08 Demonstration of changing and updating colors in React
    09:51 Using useState hook to manage state variables and update UI dynamically
    13:07 Explanation of creating state variables and transitioning to state objects
    19:53 Updating state based on previous state using the spread operator.
    22:48 Explanation on updating counter value by one and four
    28:21 Explanation of the use effect hook in React components
    31:08 Implementing a timer function using useEffect
    36:13 Understanding the use of useEffect hook in React
    38:52 Using useRef hook to access and modify DOM elements
    44:28 Using useRef to prevent unnecessary re-renders
    47:23 Using useRef to maintain state without triggering component rerender
    53:02 Explaining the use of useRef, useMemo, and useCallback hooks in React.
    56:00 Implementing power function in React Hooks
    1:01:42 Using useMemo hook to prevent unnecessary recalculation of the cube function
    1:04:21 UseCallback Hook caches function between renders
    1:10:10 Using memo method to optimize rendering
    1:13:01 Explanation on function comparison using equality check.
    1:18:17 Using useEffect to prevent unnecessary renders
    1:20:46 Using props to pass data at every component level can be painful.
    1:26:34 Adding context support in React project
    1:29:49 Mounting components and consuming context in React app
    1:35:29 useContext hook for managing global data and sharing data across components
    1:38:07 Creating a counter using useState and useReducer hooks.
    1:44:01 Dispatch method updates state using reducer function
    1:47:08 Use reducer function for state management
    1:53:01 Using useReducer to efficiently update state variables for different actions.
    1:55:40 Illustrating how useLayoutEffect executes before rendering
    2:01:24 Understanding useLayoutEffect and useEffect Hooks in React
    2:03:54 Demonstration of using React Hooks to manage state and local storage data
    2:09:17 Implementing custom React Hook to handle local storage operations
    2:12:13 Creating and using custom hooks with local storage
    2:17:45 Thank you for watching

  • @DeveshShantasha
    @DeveshShantasha 25 วันที่ผ่านมา +3

    Well Explained... Really Appreciate to making React hooks very simple. This is what we require as a professional to learn the things quickly.

    • @GreatStackDev
      @GreatStackDev  24 วันที่ผ่านมา

      Thank you so much.

  • @sudo_ayush
    @sudo_ayush 2 หลายเดือนก่อน +2

    Its a real Gem !! best explaination on hooks, great way of teaching-- starts with a problem --> makes us realise why we need any particular hook--> explains it clearly

  • @homawasimkhan3845
    @homawasimkhan3845 3 หลายเดือนก่อน +5

    The way u explain is so amaizing ..ur great teacher.....lots of thanxs

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน +1

      Glad you liked it! Thank you. 😊

  • @Kids_1_Zone
    @Kids_1_Zone 6 หลายเดือนก่อน +11

    Post React Full Course in one video sir❤❤❤

  • @monikadewangan885
    @monikadewangan885 หลายเดือนก่อน +3

    Hi @greatStack, javascript, react , react hooks tutorials are very very informative, thank you so much for such a great videos.
    could you please please make a video on node js, express js and mongodb .
    we will really grateful.

    • @GreatStackDev
      @GreatStackDev  หลายเดือนก่อน

      Thank you. Noted. Will try.

  • @chris_bum
    @chris_bum หลายเดือนก่อน +4

    Thanks Great Stack❤. And also teach express js, node js, mangodb tutorial

  • @imwarlord6617
    @imwarlord6617 2 หลายเดือนก่อน +3

    Bro this content worth thousands, simply teaching valueable things for free, this worth ad

    • @GreatStackDev
      @GreatStackDev  2 หลายเดือนก่อน

      I appreciate that! Thank you so much 😊

  • @divyadharshini6916
    @divyadharshini6916 6 หลายเดือนก่อน +13

    This tutorial is really helpful and usefull for beginners ❤️

    • @GreatStackDev
      @GreatStackDev  6 หลายเดือนก่อน +3

      Glad it was helpful! Thank you for the comment. 😊

    • @pguruvishnusaigmail
      @pguruvishnusaigmail 5 หลายเดือนก่อน

      for me too divya

  • @_ashuvn
    @_ashuvn 2 หลายเดือนก่อน +2

    very beautifully crafted videos 🙏 you are our custom Hook 😊😊🎉

    • @GreatStackDev
      @GreatStackDev  2 หลายเดือนก่อน

      Thank you so much! 😊 Keep leaning.

  • @rjf2408
    @rjf2408 3 หลายเดือนก่อน +1

    Thank you bhaiya, aaj meri doubt solve itne din hawa mai tha..

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน

      Glad you liked it. You are welcome! 😊

  • @ZakirAhmad-code
    @ZakirAhmad-code 3 หลายเดือนก่อน +1

    i really appreciate your efforts in helping me understand frontend . Love from Pakistan

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน

      Thank you so much! 🙂 Keep learning and build some react projects.

  • @MDMS-tk1zu
    @MDMS-tk1zu 6 หลายเดือนก่อน +4

    Brother, I can confidently say that this video is one of the most complete and accurate for learning the hooks in the react library, thank you
    😊😊👏🙏🙏

  • @powerofthoughts_tamil
    @powerofthoughts_tamil 6 หลายเดือนก่อน +4

    Thank you so much GreatStack Team. The greatest of all time❤❤️🥰. Love from Srilanka🇱🇰

  • @LogicLoomer07
    @LogicLoomer07 4 หลายเดือนก่อน +1

    Thanks, bro. I've learned a lot from your tutorials, and I appreciate your clear explanations.

  • @christophermawela3318
    @christophermawela3318 3 หลายเดือนก่อน +1

    Thank you very much, as I was giving up React, then this tutorial. Best explanations...

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน

      You're welcome! Glad it helped you. Thank you! 😊

  • @IroshanaRavishan
    @IroshanaRavishan 2 หลายเดือนก่อน

    This content is really helpful for anyone who is looking for React Hooks or even the beginners. Thanks for sharing this AMAZING Simple content...!

  • @LahoreAI
    @LahoreAI 3 หลายเดือนก่อน +1

    I love your tutorials previously because you provide assets 😅 and your explanation was always good. But in this video you just nailed react hooks I don't think there is any other source where you can learn hooks in that much easy way. I really appreciate your effort ❤.

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน +1

      Thank you so much for your kind words! 😊 I’m glad you found the React hooks tutorial helpful. Your feedback really motivates me. Thanks for your support! ❤️

  • @AhmadShah-wd3yy
    @AhmadShah-wd3yy 6 หลายเดือนก่อน +1

    One of the perfect tutorial that i found i have watched! this tutorial is amazing and really intresting. thank you for making such kind of tutorial.

  • @ameen_hamza
    @ameen_hamza 4 หลายเดือนก่อน

    This tutorial helped me a lot to understand hooks with real world examples.

  • @Yeabtsegaafewerk
    @Yeabtsegaafewerk 6 หลายเดือนก่อน +4

    1M subscriber GreateStack👏👏👏👏👏👏👏👏👏👏👏

  • @AakashSisodiya-j2v
    @AakashSisodiya-j2v 2 หลายเดือนก่อน +1

    Thankyou So much sir Its really a grate Videos 🙌🙌

  • @SADDAMKHAN-tv7ro
    @SADDAMKHAN-tv7ro 3 หลายเดือนก่อน +1

    Your like bookm bro your content deserve million's of views

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน

      Thank you so much.

  • @dharunm8211
    @dharunm8211 4 หลายเดือนก่อน +1

    you done a great job sir!!

  • @arjunchaurasiya6709
    @arjunchaurasiya6709 หลายเดือนก่อน

    Custom hook is hard to understand but for other hook , thanks ❤

  • @sarthakitaliya7660
    @sarthakitaliya7660 2 หลายเดือนก่อน +1

    thanks a lot.❤

    • @GreatStackDev
      @GreatStackDev  2 หลายเดือนก่อน

      You're welcome. 😊 Keep learning.

  • @rahulrj5884
    @rahulrj5884 3 หลายเดือนก่อน +2

    Wow what a clean and clear explanation of all the react hooks, thank you so much for such a great explanation which no one can get on paid course also.

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน

      Thank you so much Rahul! Glad you liked it. 😊

  • @phenixbd
    @phenixbd 29 วันที่ผ่านมา

    Thanks a lot. clear and easy presentation

  • @BenjunOgania
    @BenjunOgania 5 หลายเดือนก่อน +1

    This Video is really really helpful thank you very much.

    • @GreatStackDev
      @GreatStackDev  5 หลายเดือนก่อน

      Glad to hear that. Thanks for your comment. 😊

  • @arjunchaurasiya6709
    @arjunchaurasiya6709 หลายเดือนก่อน +1

    Mja aa gya❤

  • @Web_mentor
    @Web_mentor 6 หลายเดือนก่อน +2

    Bhut mast video banya bhai aapne

  • @SDamariis
    @SDamariis 4 หลายเดือนก่อน

    Thank you, Avinash. You helped me a lot, and I learned a lot from your videos, I really like the way you explain. 🙏

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      Glad to hear that. Thank you

  • @jesnuch8956
    @jesnuch8956 3 หลายเดือนก่อน +1

    Thank you ❤

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน

      You're welcome 😊 Keep Learning.

  • @aminbluestack3450
    @aminbluestack3450 3 หลายเดือนก่อน +1

    My man❤❤❤❤❤❤❤❤❤ sooo well explained

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน

      Thank you so much 😊

  • @venkateshpentakota6514
    @venkateshpentakota6514 3 หลายเดือนก่อน +1

    Amazing 🤩

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน

      Thank you Venkat.

  • @JBrogrammer
    @JBrogrammer 6 หลายเดือนก่อน

    Bro You're a great Person Thanks a lot, My Confidence level increased after I started Watching Your Videos😊❤

  • @almandohafenaaje1420
    @almandohafenaaje1420 5 หลายเดือนก่อน +1

    GreatStack, i mean GreatStuff, Thank you for explaining very well.

    • @GreatStackDev
      @GreatStackDev  5 หลายเดือนก่อน

      Glad you liked it. Thanks for your comment. 😊

  • @8creators
    @8creators 6 หลายเดือนก่อน +1

    Loved it.. please make a detail video on redux!

  • @10xlofizone
    @10xlofizone 6 หลายเดือนก่อน +1

    👏Hello brother your react series is going best👍👍 make more projects of react
    But bro I have an problem in react installation please help me brother make solution video please 🥺

  • @YaredAyeleDebela
    @YaredAyeleDebela 6 หลายเดือนก่อน +2

    Great tutorials from a good guy 👍👍

    • @GreatStackDev
      @GreatStackDev  6 หลายเดือนก่อน +1

      Thank you my friend. 😊

    • @azsreenu2540
      @azsreenu2540 4 หลายเดือนก่อน

      ❤​@@GreatStackDev

  • @bonfaceosuka
    @bonfaceosuka หลายเดือนก่อน

    Thank you so much for this video , it has been of great help to me.

  • @ShouryaSetu
    @ShouryaSetu 5 หลายเดือนก่อน +2

    Amazing tutorial

    • @GreatStackDev
      @GreatStackDev  5 หลายเดือนก่อน +1

      Glad you liked it. Thanks for your comment. 😊

  • @tonytodd7011
    @tonytodd7011 3 หลายเดือนก่อน

    Thank you for your great lesson man! Very clear!

  • @anwaralikazim5819
    @anwaralikazim5819 2 หลายเดือนก่อน

    Nice sir Make some video on react native your teaching styles is too good

  • @PrashantKumar-ry4fu
    @PrashantKumar-ry4fu 14 วันที่ผ่านมา

    great explanation

  • @chandanakumara2246
    @chandanakumara2246 28 วันที่ผ่านมา

    Superb ❤❤

  • @jayeshshaha49
    @jayeshshaha49 3 หลายเดือนก่อน +1

    Thank you

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน

      Glad you liked it. You're welcome Jayesh! 😊

  • @legendarygaming8180
    @legendarygaming8180 2 หลายเดือนก่อน +1

    nice explain sir👌

  • @ganezxgk
    @ganezxgk 2 หลายเดือนก่อน

    bestest react hooks vdo ever

  • @narutoujumaki953
    @narutoujumaki953 4 หลายเดือนก่อน +1

    thank you so much
    :)

  • @webdevgaurav
    @webdevgaurav 2 หลายเดือนก่อน

    it's not everything but it's fine. Thanks

  • @lonewolf.8635
    @lonewolf.8635 5 หลายเดือนก่อน

    This is a great video. Great examples definitely to rewatch

    • @GreatStackDev
      @GreatStackDev  5 หลายเดือนก่อน

      Glad you enjoyed it! Thanks for your comment. 😊

  • @younessehorra5592
    @younessehorra5592 6 หลายเดือนก่อน +1

    Great exlpanation 👏, thanks man ❤

  • @quvomiddinkamalov3292
    @quvomiddinkamalov3292 6 หลายเดือนก่อน +1

    Thank you, sir ❤

  • @VigneshMuraliKumar
    @VigneshMuraliKumar 6 หลายเดือนก่อน +1

    I am excited 🎉🎉🎉

  • @asheeshmathur
    @asheeshmathur 5 หลายเดือนก่อน +1

    Excellent

    • @GreatStackDev
      @GreatStackDev  5 หลายเดือนก่อน

      Glad you liked it. Thanks for your comment. 😊

  • @shubhishubhrasoi
    @shubhishubhrasoi 2 หลายเดือนก่อน

    Please make more series like that for javascript and react and redux too

  • @drexk6569
    @drexk6569 6 หลายเดือนก่อน

    Good explanation indeed, I love your content. But can we create more than one context in a project

    • @idevkr
      @idevkr 6 หลายเดือนก่อน

      Yes we can create more than one context

  • @spaceworld1194
    @spaceworld1194 5 หลายเดือนก่อน +2

    Very well explained. it's clear my all doubt. very-very thanks to making this type conceptual video.
    can you please make full video tutorial on firebase.

  • @fluteprograming
    @fluteprograming 3 หลายเดือนก่อน

    best explanation

  • @akoladebode-ajayi327
    @akoladebode-ajayi327 6 หลายเดือนก่อน +1

    Thank you sir 🙏

  • @powercircuitacademy
    @powercircuitacademy 6 หลายเดือนก่อน

    Congratulations🎉 1M

  • @EnvoyIct
    @EnvoyIct 5 หลายเดือนก่อน

    Sir when you teaching use ref: are u using tailwind css

  • @aamirmajeedkhan9570
    @aamirmajeedkhan9570 5 หลายเดือนก่อน

    Great Explanation

  • @aceaceace2355
    @aceaceace2355 5 หลายเดือนก่อน

    Clear an concise

  • @shaikyasmeen3947
    @shaikyasmeen3947 4 หลายเดือนก่อน +1

    Please make detail tutorial on redux and toolkit

  • @saurabhkumar-ch2xs
    @saurabhkumar-ch2xs 2 หลายเดือนก่อน

    thanks

  • @Mahenaj-l7e
    @Mahenaj-l7e 6 หลายเดือนก่อน +3

    You are so awesome.😀 Please Keep going
    :)

    • @GreatStackDev
      @GreatStackDev  6 หลายเดือนก่อน +1

      You're welcome. Thank You for your comment. 😊

  • @quickfactuniverse
    @quickfactuniverse 2 หลายเดือนก่อน

    Sir make the complete video on React router and nested routing plz plz

  • @rajasuryar5398
    @rajasuryar5398 2 หลายเดือนก่อน +2

    I need all the examples code for future reference
    Plz provide git link

  • @santhoshsunkara7212
    @santhoshsunkara7212 2 หลายเดือนก่อน +1

    Content is top notch but there are a lot of ads

    • @fashionaddaudaipur4023
      @fashionaddaudaipur4023 หลายเดือนก่อน

      Free me kuch ni milta youtube pr

    • @neerajslab
      @neerajslab หลายเดือนก่อน

      Subscription le lo

    • @neerajslab
      @neerajslab หลายเดือนก่อน

      ​@@fashionaddaudaipur4023khi v kuchh nhi milta free me

  • @spartondon3591
    @spartondon3591 6 หลายเดือนก่อน +3

    Sir as you hit 1million please provide 1 react js project with source code, as a lower middle class student your code prize is not affordable,iam requesting not for all source code just one react project code🥺🙏

    • @Nikhil-xx5bh
      @Nikhil-xx5bh 5 หลายเดือนก่อน

      Bro, why do you need the source code? Just watch the video and code alongside it."

  • @maazshaikh7905
    @maazshaikh7905 4 หลายเดือนก่อน

    45:16 we can also solve the infinite render issue by passing [value] as a dependency in useEffect

  • @marcelohenriquedasilvafons781
    @marcelohenriquedasilvafons781 3 หลายเดือนก่อน +1

    Nice!

    • @GreatStackDev
      @GreatStackDev  3 หลายเดือนก่อน

      I'm so glad! 😊 Keep learning.

  • @fristanlobo1204
    @fristanlobo1204 3 หลายเดือนก่อน

    While giving the example of useRef (), You removed useEffect because it was rendering the component alot of times. But, if we had passed the dependency of Value to useEffect. It would have rendered only when the Value would have changed right??
    Then what useRef made different there?

    • @fristanlobo1204
      @fristanlobo1204 3 หลายเดือนก่อน

      Completedly understood the 2nd implementtion of useRef hook. That is what we have used it for . But can you please help me understanding the !st use of useRef?

  • @dambujopaulo4204
    @dambujopaulo4204 6 หลายเดือนก่อน +1

    I'm the first one to comment... Loves your videos... Keep it

  • @ayercoderx
    @ayercoderx 2 หลายเดือนก่อน +1

    27:28

  • @ajaydhanwate255
    @ajaydhanwate255 5 หลายเดือนก่อน +2

    nice one tutorial👌

    • @GreatStackDev
      @GreatStackDev  4 หลายเดือนก่อน

      Glad you liked it. Thank You.. 😊

  • @MuhammadShaheer-e9m
    @MuhammadShaheer-e9m 6 หลายเดือนก่อน +2

    Bro when I stood up on my feet I will meet you one day ....

  • @ghostAgent99
    @ghostAgent99 4 หลายเดือนก่อน

    overall pretty good, you have a couple errors in your useReducer example though

  • @realnatureloveradda1811
    @realnatureloveradda1811 5 หลายเดือนก่อน

    Sir please make a full tutorial video how to upload website upload online and what is SSL, hosting and how to maintain our website
    Please sir it's request

  • @vageshnp6792
    @vageshnp6792 2 หลายเดือนก่อน +1

    what is major diff between redux and useContext hook

    • @GreatStackDev
      @GreatStackDev  2 หลายเดือนก่อน +1

      Redux is a complex state management library with a centralized store, ideal for large apps. useContext is a simpler, built-in hook for sharing state between components, best for simpler use cases. Redux has a steeper learning curve and more setup compared to useContext.

    • @vageshnp6792
      @vageshnp6792 2 หลายเดือนก่อน

      Please can you make a video on redux

  • @VamsiEdara
    @VamsiEdara 4 หลายเดือนก่อน

    Sir Please add video on redux toolkit too ....

  • @abuasim1000
    @abuasim1000 4 หลายเดือนก่อน

    thanks for your excellent explanation but I am facing problem in useContext section as whenever i am trying more than one data, it shows as an error and adds that Objects are not valid as a React child (found: object with keys {name, phone}). If you meant to render a collection of children, use an array instead. please help me

  • @fikreterkara3234
    @fikreterkara3234 6 หลายเดือนก่อน

    Please bring a big project with next js

  • @abhinandpappu8865
    @abhinandpappu8865 3 หลายเดือนก่อน

    in useeffect , settimeout() without use effect working as increasing value by after 2seconds what is difference using use effect and without it

  • @morlanandini1750
    @morlanandini1750 หลายเดือนก่อน

    why cant we directly put count+4 in use state example?

  • @poojanoothi3748
    @poojanoothi3748 2 หลายเดือนก่อน

    Do tutorial on react native and flutter.

  • @Code_With_Aman1
    @Code_With_Aman1 6 หลายเดือนก่อน

    Nice ❤❤

  • @kishanthshanthakumar7637
    @kishanthshanthakumar7637 5 หลายเดือนก่อน

    in useEffect Section you forgot to mention about the Lifecycle methods and return {} .

  • @itsmjns23
    @itsmjns23 2 หลายเดือนก่อน

    can you use appwrite as a database and nodejs i hope you'll notice me

  • @TECHWITHKAMALRAJ
    @TECHWITHKAMALRAJ 6 หลายเดือนก่อน +2

    side effects?

    • @mhhamzaedits
      @mhhamzaedits 6 หลายเดือนก่อน

      😂😂😂

  • @finearts2391
    @finearts2391 3 หลายเดือนก่อน

    46:00

  • @malag6358
    @malag6358 3 หลายเดือนก่อน

    Explanation is clear , but too much ads

    • @_7Spike_
      @_7Spike_ 3 หลายเดือนก่อน +1

      use revenced youtube for block ads

  • @_HarshitChaurasia
    @_HarshitChaurasia 6 หลายเดือนก่อน +1

    Sir please upload tha project real time chat application

  • @bhanupratap5792
    @bhanupratap5792 4 หลายเดือนก่อน +1

    Ads are coming every 5 minutes which is very irritating but the rest of the video is good

    • @sajidsaleem9110
      @sajidsaleem9110 4 หลายเดือนก่อน

      use adgaurd extension - i have never seen an add for literally years

  • @smsadiiqchannel3059
    @smsadiiqchannel3059 หลายเดือนก่อน

    All React Hooks Explained in 2 Hours | Complete React Hooks Tutorial with Example 2024