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

[@GreatStackDev]

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

[@mt15explore]

90%

[@kiritdiyora7466]

Got 90%

[@vakyz5333]

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]

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

[@vakyz5333]

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

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]

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

[@Avontime]

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

[@rajesmaheshwari]

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]

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

[@GreatStackDev]

Thank you so much.

[@sudo_ayush]

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]

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

[@GreatStackDev]

Glad you liked it! Thank you. 😊

[@Kids_1_Zone]

Post React Full Course in one video sir❤❤❤

[@monikadewangan885]

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]

Thank you. Noted. Will try.

[@chris_bum]

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

[@imwarlord6617]

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

[@GreatStackDev]

I appreciate that! Thank you so much 😊

[@divyadharshini6916]

This tutorial is really helpful and usefull for beginners ❤️

[@GreatStackDev]

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

[@pguruvishnusaigmail]

for me too divya

[@_ashuvn]

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

[@GreatStackDev]

Thank you so much! 😊 Keep leaning.

[@rjf2408]

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

[@GreatStackDev]

Glad you liked it. You are welcome! 😊

[@ZakirAhmad-code]

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

[@GreatStackDev]

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

[@MDMS-tk1zu]

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]

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

[@LogicLoomer07]

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

[@christophermawela3318]

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

[@GreatStackDev]

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

[@IroshanaRavishan]

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]

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]

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]

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]

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

[@Yeabtsegaafewerk]

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

[@AakashSisodiya-j2v]

Thankyou So much sir Its really a grate Videos 🙌🙌

[@SADDAMKHAN-tv7ro]

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

[@GreatStackDev]

Thank you so much.

[@dharunm8211]

you done a great job sir!!

[@GreatStackDev]

Thank you. 😊

[@arjunchaurasiya6709]

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

[@sarthakitaliya7660]

thanks a lot.❤

[@GreatStackDev]

You're welcome. 😊 Keep learning.

[@rahulrj5884]

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]

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

[@phenixbd]

Thanks a lot. clear and easy presentation

[@BenjunOgania]

This Video is really really helpful thank you very much.

[@GreatStackDev]

Glad to hear that. Thanks for your comment. 😊

[@arjunchaurasiya6709]

Mja aa gya❤

[@Web_mentor]

Bhut mast video banya bhai aapne

[@SDamariis]

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

[@GreatStackDev]

Glad to hear that. Thank you

[@jesnuch8956]

Thank you ❤

[@GreatStackDev]

You're welcome 😊 Keep Learning.

[@aminbluestack3450]

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

[@GreatStackDev]

Thank you so much 😊

[@venkateshpentakota6514]

Amazing 🤩

[@GreatStackDev]

Thank you Venkat.

[@JBrogrammer]

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

[@almandohafenaaje1420]

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

[@GreatStackDev]

Glad you liked it. Thanks for your comment. 😊

[@8creators]

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

[@10xlofizone]

👏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]

Great tutorials from a good guy 👍👍

[@GreatStackDev]

Thank you my friend. 😊

[@azsreenu2540]

❤​@@GreatStackDev

[@bonfaceosuka]

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

[@ShouryaSetu]

Amazing tutorial

[@GreatStackDev]

Glad you liked it. Thanks for your comment. 😊

[@tonytodd7011]

Thank you for your great lesson man! Very clear!

[@anwaralikazim5819]

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

[@PrashantKumar-ry4fu]

great explanation

[@chandanakumara2246]

Superb ❤❤

[@jayeshshaha49]

Thank you

[@GreatStackDev]

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

[@legendarygaming8180]

nice explain sir👌

[@ganezxgk]

bestest react hooks vdo ever

[@narutoujumaki953]

thank you so much :)

[@GreatStackDev]

You're welcome!

[@webdevgaurav]

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

[@lonewolf.8635]

This is a great video. Great examples definitely to rewatch

[@GreatStackDev]

Glad you enjoyed it! Thanks for your comment. 😊

[@younessehorra5592]

Great exlpanation 👏, thanks man ❤

[@quvomiddinkamalov3292]

Thank you, sir ❤

[@VigneshMuraliKumar]

I am excited 🎉🎉🎉

[@asheeshmathur]

Excellent

[@GreatStackDev]

Glad you liked it. Thanks for your comment. 😊

[@shubhishubhrasoi]

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

[@drexk6569]

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

[@idevkr]

Yes we can create more than one context

[@spaceworld1194]

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]

best explanation

[@akoladebode-ajayi327]

Thank you sir 🙏

[@powercircuitacademy]

Congratulations🎉 1M

[@EnvoyIct]

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

[@aamirmajeedkhan9570]

Great Explanation

[@aceaceace2355]

Clear an concise

[@shaikyasmeen3947]

Please make detail tutorial on redux and toolkit

[@GreatStackDev]

Noted

[@saurabhkumar-ch2xs]

thanks

[@Mahenaj-l7e]

You are so awesome.😀 Please Keep going :)

[@GreatStackDev]

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

[@quickfactuniverse]

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

[@rajasuryar5398]

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

[@santhoshsunkara7212]

Content is top notch but there are a lot of ads

[@fashionaddaudaipur4023]

Free me kuch ni milta youtube pr

[@neerajslab]

Subscription le lo

[@neerajslab]

​@@fashionaddaudaipur4023khi v kuchh nhi milta free me

[@spartondon3591]

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]

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

[@maazshaikh7905]

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

[@marcelohenriquedasilvafons781]

Nice!

[@GreatStackDev]

I'm so glad! 😊 Keep learning.

[@fristanlobo1204]

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]

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]

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

[@ayercoderx]

27:28

[@ajaydhanwate255]

nice one tutorial👌

[@GreatStackDev]

Glad you liked it. Thank You.. 😊

[@MuhammadShaheer-e9m]

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

[@ghostAgent99]

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

[@realnatureloveradda1811]

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]

what is major diff between redux and useContext hook

[@GreatStackDev]

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]

Please can you make a video on redux

[@VamsiEdara]

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

[@abuasim1000]

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]

Please bring a big project with next js

[@abhinandpappu8865]

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

[@morlanandini1750]

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

[@poojanoothi3748]

Do tutorial on react native and flutter.

[@Code_With_Aman1]

Nice ❤❤

[@kishanthshanthakumar7637]

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

[@itsmjns23]

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

[@TECHWITHKAMALRAJ]

side effects?

[@mhhamzaedits]

😂😂😂

[@finearts2391]

46:00

[@malag6358]

Explanation is clear , but too much ads

[@_7Spike_]

use revenced youtube for block ads

[@_HarshitChaurasia]

Sir please upload tha project real time chat application

[@bhanupratap5792]

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

[@sajidsaleem9110]

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

[@smsadiiqchannel3059]

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