Learn React JS Hooks | React Hooks Tutorial | React Hooks Explained | React Hooks for Beginners
Вставка
- Опубліковано 2 сер 2024
- 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.
![Lp. Последняя Реальность #107 РОДНОЙ ДОМ [Финал] • Майнкрафт](http://i.ytimg.com/vi/IK3QKzKUlHM/mqdefault.jpg)
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..
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❤❤❤🎉🎉🎉🎉
that's amazing I really like it.
That will be great if you give notes on whatever you teach in this class.
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.
Glad you like it!
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 .
superb. thank you Dipesh
thankyou for such knowledge full content.
ur teaching style is awesome if possible to make another react-redux project video.
Very nice and simple explanation of hooks. Keep sharing the knowledge, and keep growing. Thanx.
Super bro!!! 5 stars for the content and the way you present with example.
Thanks! awesome
This is great content. Many thanks to you.
great content 🔥
Extremely excited 🔥 ...
Bro your videos are really helpful...thank you
Awesome Tutorial !!! Absolutely loved it!!!
Thanks Dipesh, Video is very informative. Could you do more on React project setup for project build.
Really awesome bro.. concise and clear.. Can I get the Source code link for this video.. It would be helpful for me
Wow!! 👏 👏 👏 Thanks for a decent tutorial on hooks!
Welcome, Abhishek!
Very well explained👏... Thnqq for ur understandable content..
My pleasure 😊
Great work 🤯
Which one is better for project to management a State ?
Recoil
Redux
Exelente content
Thanks!
Sir can you make a full course based on your roadmap. A complete react bundle. ❤️ Your videos
You are rocking
Can you make video on connect frontend to backend, using express node Mongo react
hello brother please make video on most useful react libraries like react persist and rest useful libraries which are very useful in react projects
thank you !!!!!!!!!!!!😁😁😁
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
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.
Big thumbs up 🚀
Hi Dipesh, Please share if you have any tutorial on Immer Reducer
Thankyu so much best tutorial on react hooks.
Welcome and thanks for watching!
nice tutorial. thankyou!
You're welcome!
Btw tutorial was superb.
awesome
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
React-Hook-Form Package - ua-cam.com/video/GfWJLK6S1Ec/v-deo.html
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
he should have just passed the reference of initialValue than directly calling it within useState
Really awesome explanation bro
Thank you so much 🙂
I am the first 😂😂 thanks a lot for this 🙏🏻
When you upload React unit testing crash course ???
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 ?
If you're giving an example of useReducer then why you are using useState hook in input element on change event? 1:19:00
Wow what a superb explained ❤
Thanks a lot 😊
Thanks
Welcome!
Awesome🔥🔥🔥
Thanks 🔥
Very useful.❤
Glad it was helpful!
Thank you sir.
Most welcome
if possible make a vedio on spring boot
Amazing lesson thank you ❤
You're so welcome!
Please upload class level component vedio
thanks 👏👏
Welcome!
Awesome. Make redux tutorials too
Redux tutorials -
Learn React Redux with Project - ua-cam.com/video/0W6i5LYKCSI/v-deo.html
Learn React Redux Thunk with Project - ua-cam.com/video/JDZRfLGNWdc/v-deo.html
React Redux Toolkit with Project - ua-cam.com/video/EnIRyNT2PMI/v-deo.html
React Redux Toolkit with Project | Redux Middleware Thunk - ua-cam.com/video/FeYTMsWpgQo/v-deo.html
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.
Sir Need a video and small project on React Cookies
I have one doubt in the customHook in the WindowScreen example why we haven't added the screensize state in the dependency array?
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.
Request you to make videos in Indian accent.
low voice is a problem.
Keep up the good work
Make a video on redux-saga..
Hlo sir i am facing problem initializing JS/TS language features take one hour and server is not starting please help
Uncaught runtime errors:
×
ERROR
[ProtectedRouteAdmin] is not a component. All component children of must be a or
1:30:53 we are in the what screen now ?
you teach things pretty fast and take some other concepts as granted which makes pretty hard to understand
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.
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.
HOC vs Render props vs Custom hooks
Hi Dipesh can you share github repo link
Unfortunately, I don't have a git repo for this video.
Plz make a video on react-redux jwt token header authorization using feth / axios post get method
Source code
The video is nice but as a beginner u are teaching very fast. Sometimes it is hard to grab!
Yes, you are right
Bhaiya Cordova Vs Reactjs kaun sa thik hai 2021 me
React for beginners... If you are referring to latest technology then that may take time to be in use in productions.
@@hiteshsuthar1097 It's old Cross Platform App Development Cordova
Can You please Is I have to Learn Full Reactjs Or just Basic will work ??
@@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.
Everything is good but just change your style in the thumbnail. That doesn't feel good in these days.
Haath kyun jodta hai yar
bhai hindi nhi aati kya...??
Bhai hindi to atti hai but sirf hindi me dekne wali audience nahi hai na.