Learn React JS Hooks | React Hooks Tutorial | React Hooks Explained | React Hooks for Beginners

This video is a complete React Hooks Crash Course for beginners in. React hooks are building blocks of function component. We will cover each react hook with detailed explanation and examples.
We will see how when we should use any react hook and when not. At last we will build a custom react hook.
Node.js: The Complete Guide to Build Backend Projects [2023]🔥
Link - www.dipeshmalvia.com/courses/...
🔥 Unacademy 👇
Use my code "dipesh01" to get 10% discount
You get all of this and much more for a nominal fee of Rs999/- for the entire year and with my code you get this for Rs 899!
Career as a Developer: unacademy.com/goal/career-as-...
Project Review: bit.ly/Unacademy-Raj-Software..."
🔥 Video contents... ENJOY 👇
0:00:00 - Intro
0:02:22 - useState
0:18:38 - useEffect
0:28:31 - useRef
0:38:33 - useMemo
0:49:16 - useCallback
0:58:56 - useContext
1:08:45 - useReducer
1:24:16 - Build Custom React Hook
1:36:47 - Outro
⭐️ Support my channel⭐️
www.buymeacoffee.com/dipeshma...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / programmingwithdipesh
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ Hashtags ⭐️
#react #reacthooks #beginners #tutorial
Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

[@iit_motivation]

Sir can you make a full playlist Or paid courses of react Js for beginner i am eagerly waiting .... Your teaching style is awesome sir..

[@virajkoradia7468]

I have watch the some videos for the hooks but this video explaination beats everyone Thanks for the amazing content and i have understand the whole video❤❤❤🎉🎉🎉🎉

[@ShahidAnsari-so5fl]

that's amazing I really like it. That will be great if you give notes on whatever you teach in this class.

[@shaikhsimran3227]

Hi dipesh, I am following your react tutorials recently It's amazing ..just wanted to say you could you pls make a video on new update of react it would be great .

[@dbiswas]

This is wonderful ❤, so many videos out there but no one teaches you the building blocks. Dipesh does it fantastic. Thanks for teaching the community.

[@DipeshMalvia]

Glad you like it!

[@GabrielMartinez-ez9ue]

superb. thank you Dipesh

[@hemkantgangurde8071]

Awesome Tutorial !!! Absolutely loved it!!!

[@hiteshsuthar1097]

Extremely excited 🔥 ...

[@malikehsan147]

Very nice and simple explanation of hooks. Keep sharing the knowledge, and keep growing. Thanx.

[@bidhanroy3786]

ur teaching style is awesome if possible to make another react-redux project video.

[@mrrogan5686]

This is great content. Many thanks to you.

[@pushkarkumar5578]

thankyou for such knowledge full content.

[@imkir4n]

Bro your videos are really helpful...thank you

[@sumit2795]

Super bro!!! 5 stars for the content and the way you present with example.

[@DipeshMalvia]

Thanks! awesome

[@trishulnaik4234]

Sir can you make a full course based on your roadmap. A complete react bundle. ❤️ Your videos

[@09abhishekk]

Wow!! 👏 👏 👏 Thanks for a decent tutorial on hooks!

[@DipeshMalvia]

Welcome, Abhishek!

[@pateljay5351]

Great work 🤯

[@rekhakumar7859]

Thanks Dipesh, Video is very informative. Could you do more on React project setup for project build.

[@harishwarank6445]

Really awesome bro.. concise and clear.. Can I get the Source code link for this video.. It would be helpful for me

[@arshiyashaik4322]

Very well explained👏... Thnqq for ur understandable content..

[@DipeshMalvia]

My pleasure 😊

[@nktechofficial]

great content 🔥

[@ZainAli-me4qk]

Big thumbs up 🚀

[@pateljay5351]

Which one is better for project to management a State ? Recoil Redux

[@sivasankarthalavai1172]

You are rocking

[@vhsphshbs]

Btw tutorial was superb.

[@mearn_ctaftsman]

Hello Dipesh, Kindly let me know the headset name with model you weared on this video and it would be great where we can purchase that too. 🙏🙏🙏🙏🙏🙏🙏. Your videos are very informative.

[@HimanshuKumar-hm4wv]

Thankyu so much best tutorial on react hooks.

[@DipeshMalvia]

Welcome and thanks for watching!

[@abhiimali]

thank you !!!!!!!!!!!!😁😁😁

[@SKCOOLVLOGS]

55:16 DisplayName component is being rendered but displayName prop not updated so code inside useEffect will not run and if you print something in console outside useEffect you can see that component rendered

[@BestHomeMadeFood56]

Hi Dipesh, Please share if you have any tutorial on Immer Reducer

[@weforyouweb1165]

Wow what a superb explained ❤

[@DipeshMalvia]

Thanks a lot 😊

[@S4LTYT]

hello brother please make video on most useful react libraries like react persist and rest useful libraries which are very useful in react projects

[@nikhil_squats]

Can you make video on connect frontend to backend, using express node Mongo react

[@anjanasanthosh1040]

nice tutorial. thankyou!

[@DipeshMalvia]

You're welcome!

[@practicalcoder4372]

Awesome🔥🔥🔥

[@DipeshMalvia]

Thanks 🔥

[@bobbybobby5996]

Really awesome explanation bro

[@DipeshMalvia]

Thank you so much 🙂

[@shikhagupta1120]

Hi Dipesh, Thanks for this video. I have one question, I don't understand the use of initialValue().because after that as well "function called " statement is printed whenever click on increment , decrement button

[@hemkantgangurde8071]

he should have just passed the reference of initialValue than directly calling it within useState

[@shahhussain56]

I am the first 😂😂 thanks a lot for this 🙏🏻

[@abhishekcode]

Very useful.❤

[@DipeshMalvia]

Glad it was helpful!

[@arjun-oy5vo]

Hey Dipesh can you please make a tutorial on react-hook-form , usewatch and everything i was gng through lot of materials but couldnt understand and also if possible redux toolkit . Thanks

[@DipeshMalvia]

React-Hook-Form Package - kzbin.info/www/bejne/fZe6e3-Ba7hke8U

[@saikumar5696]

Awesome. Make redux tutorials too

[@DipeshMalvia]

Redux tutorials - Learn React Redux with Project - kzbin.info/www/bejne/ZoiZmmiCjrB2ias Learn React Redux Thunk with Project - kzbin.info/www/bejne/gHW9g5mCfLOKmsU React Redux Toolkit with Project - kzbin.info/www/bejne/e5-sg6yEiZeDg6s React Redux Toolkit with Project | Redux Middleware Thunk - kzbin.info/www/bejne/fJa8hYCpjNWah9E

[@JasonKing1970]

Amazing lesson thank you ❤

[@DipeshMalvia]

You're so welcome!

[@hamzausmani3044]

low voice is a problem. Keep up the good work

[@mr.shoaibmalik2488]

awesome

[@DeepakGupta-pz4fx]

When you upload React unit testing crash course ???

[@vijaythakur7878]

Thank you sir.

[@DipeshMalvia]

Most welcome

[@sainathreddy2632]

if possible make a vedio on spring boot

[@sudharsansudan4997]

Please upload class level component vedio

[@tangudusrinivasu8855]

I have one doubt in the customHook in the WindowScreen example why we haven't added the screensize state in the dependency array?

[@hemkantgangurde8071]

Because we have added event listener, you need to add event listener only once, and its going to call that function whenever screen size is going to change.

[@sameeraggarwal3484]

in UseEffect hook, in case of class based component, I am getting output different from yours : I am inside Did Mount I am inside Did Unmount I am inside Did Mount I am inside Did Update (this repeats)... below is the CComponent.js file : import React, { Component } from 'react' export default class CComponent extends Component { state = { message : "Class COmponent", time: new Date().toString() }; // whenever a component is mounted componentDidMount() { console.log("I am inside Did Mount"); this.interval = setInterval(this.showDate, 1000); } // whenever a component is updated componentDidUpdate() { console.log("I am from Did Update"); } // whenever a component is destroyed componentWillUnmount() { console.log("I am from Will UnMount"); clearInterval(this.interval); } showDate = () => { this.setState({time: new Date().toString() }); }; render() { return ( {this.state.message} {this.state.time} ) } } Can anyone help me out Why I am getting different output ?

[@user-un3lj7iu7v]

If you're giving an example of useReducer then why you are using useState hook in input element on change event? 1:19:00

[@l.seciltuncay7921]

thanks 👏👏

[@DipeshMalvia]

Welcome!

[@WaqasKhan-xh4bm]

Sir Need a video and small project on React Cookies

[@raypenha2572]

Exelente content

[@DipeshMalvia]

Thanks!

[@manishtaneja5201]

Hello Dipesh, I was implementing the useCallback hook using the same steps. I was not able to memoise the DisplayName function and it stills called even when I click on the increment and decrement buttons. Can you please help me out what I am missing. I have created all components in same js class and called them separately from APP component. Below is my code : App Component Code : import React, {useState} from "react"; import './App.css'; import DemoUseCallback from './useCallback'; function App() { return ( ); } export default App; Below is DemoUseCallback component which has all functionality and loaded by App component : import React , {useState, useMemo, useEffect, useCallback} from "react"; function DemoUseCallback(){ const [counter, setCounter] = useState(1); const result = useMemo(() => { return factorial(counter); },[counter] ); const [name, setName] = useState(""); const displayName = useCallback(() => { return name; }, [name]); const DisplayName = ({displayName}) => { const [value,setValue] = useState(""); useEffect(() => { setValue(displayName()); console.log("component rendered") }, [displayName]); return {`My name is ${value}`} }; function factorial(n){ //Heavy operation let i = 0; while(i < 200000000) i++; if(n < 0){ return -1; } if( n === 0){ return 1; } return n * factorial(n - 1 ); } return( Factorial of {counter} is {result} setCounter(counter -1)}>Dec setCounter(counter +1)}>Inc Enter Name setName(e.target.value)} /> ) } export default DemoUseCallback I will be thankful to you if you help me out in knowing why was I not able to memoise the DisplayName function. Looking forward for your valuable advice. Thank you in advance Dipesh.

[@vhsphshbs]

Request you to make videos in Indian accent.

[@rohitbansal7839]

Make a video on redux-saga..

[@xpearson]

Thanks

[@DipeshMalvia]

Welcome!

[@SumitSatre]

Uncaught runtime errors: × ERROR [ProtectedRouteAdmin] is not a component. All component children of must be a or

[@riyaasharma5097]

Hlo sir i am facing problem initializing JS/TS language features take one hour and server is not starting please help

[@entertainshala]

At 25:09, we can see that you are clearing the console. So it's wrong that useEffect executes only if we click on date button. useEffect executes for once if we refresh. Please note this point.

[@SKCOOLVLOGS]

Show Date button updating the state variable "time" and useEffect is called whenever "time" variable is updated as we can see dependency added in array so it is correct.

[@hiteshsuthar1097]

HOC vs Render props vs Custom hooks

[@susilpadhi8774]

Hi Dipesh can you share github repo link

[@DipeshMalvia]

Unfortunately, I don't have a git repo for this video.

[@ksn425]

Plz make a video on react-redux jwt token header authorization using feth / axios post get method

[@vinayaksingh7904]

The video is nice but as a beginner u are teaching very fast. Sometimes it is hard to grab!

[@DipeshMalvia]

Yes, you are right

[@ashishm2974]

Bhaiya Cordova Vs Reactjs kaun sa thik hai 2021 me

[@hiteshsuthar1097]

React for beginners... If you are referring to latest technology then that may take time to be in use in productions.

[@ashishm2974]

@@hiteshsuthar1097 It's old Cross Platform App Development Cordova

[@ashishm2974]

Can You please Is I have to Learn Full Reactjs Or just Basic will work ??

[@hiteshsuthar1097]

@@ashishm2974 you should learn React's main and advanced concepts those are almost similar to JavaScript.. everytime it feels like you are just writing vanilla javascript. So leaning curve is easier than Angular.. The ecosystem of react is huge so you can use any utility tool for different projects.

[@temorarygmail6246]

Everything is good but just change your style in the thumbnail. That doesn't feel good in these days.

[@krunalgupta8825]

Source code

[@abhirb12]

Haath kyun jodta hai yar

[@Manish-fj7uc]

bhai hindi nhi aati kya...??

[@DipeshMalvia]

Bhai hindi to atti hai but sirf hindi me dekne wali audience nahi hai na.