ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Learn React JS Hooks | React Hooks Tutorial | React Hooks Explained | React Hooks for Beginners
ฝัง
- เผยแพร่เมื่อ 17 ส.ค. 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.dipeshmalv...
🔥 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/...
Project Review: bit.ly/Unacade..."
🔥 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.buymeacoff...
🔗 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.
![[LIVE] : ONE ลุมพินี 75 | คู่เอก "คมเพชร vs โอมาร์"](http://i.ytimg.com/vi/WugMG7Po8uw/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..
Super bro!!! 5 stars for the content and the way you present with example.
Thanks! awesome
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❤❤❤🎉🎉🎉🎉
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!
Exelente content
Thanks!
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 .
nice tutorial. thankyou!
You're welcome!
great content 🔥
Really awesome explanation bro
Thank you so much 🙂
ur teaching style is awesome if possible to make another react-redux project video.
Extremely excited 🔥 ...
Very useful.❤
Glad it was helpful!
Wow!! 👏 👏 👏 Thanks for a decent tutorial on hooks!
Welcome, Abhishek!
thankyou for such knowledge full content.
Very well explained👏... Thnqq for ur understandable content..
My pleasure 😊
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.
Thanks
Welcome!
If you're giving an example of useReducer then why you are using useState hook in input element on change event? 1:19:00
You are rocking
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 ?
Thankyu so much best tutorial on react hooks.
Welcome and thanks for watching!
Wow what a superb explained ❤
Thanks a lot 😊
I am the first 😂😂 thanks a lot for this 🙏🏻
Awesome Tutorial !!! Absolutely loved it!!!
Btw tutorial was superb.
Very nice and simple explanation of hooks. Keep sharing the knowledge, and keep growing. Thanx.
Can you make video on connect frontend to backend, using express node Mongo react
When you upload React unit testing crash course ???
Amazing lesson thank you ❤
You're so welcome!
thank you !!!!!!!!!!!!😁😁😁
superb. thank you Dipesh
1:30:53 we are in the what screen now ?, jokes aside, it was a great tutorial!!
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
Sir can you make a full course based on your roadmap. A complete react bundle. ❤️ Your videos
Hi Dipesh, Please share if you have any tutorial on Immer Reducer
that's amazing I really like it.
That will be great if you give notes on whatever you teach in this class.
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
This is great content. Many thanks to you.
Thank you sir.
Most welcome
Thanks Dipesh, Video is very informative. Could you do more on React project setup for project build.
Bro your videos are really helpful...thank you
Which one is better for project to management a State ?
Recoil
Redux
Request you to make videos in Indian accent.
Big thumbs up 🚀
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.
thanks 👏👏
Welcome!
Uncaught runtime errors:
×
ERROR
[ProtectedRouteAdmin] is not a component. All component children of must be a or
Great work 🤯
Awesome🔥🔥🔥
Thanks 🔥
Really awesome bro.. concise and clear.. Can I get the Source code link for this video.. It would be helpful for me
hello brother please make video on most useful react libraries like react persist and rest useful libraries which are very useful in react projects
low voice is a problem.
Keep up the good work
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.
Awesome. Make redux tutorials too
Redux tutorials -
Learn React Redux with Project - th-cam.com/video/0W6i5LYKCSI/w-d-xo.html
Learn React Redux Thunk with Project - th-cam.com/video/JDZRfLGNWdc/w-d-xo.html
React Redux Toolkit with Project - th-cam.com/video/EnIRyNT2PMI/w-d-xo.html
React Redux Toolkit with Project | Redux Middleware Thunk - th-cam.com/video/FeYTMsWpgQo/w-d-xo.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.
if possible make a vedio on spring boot
Hlo sir i am facing problem initializing JS/TS language features take one hour and server is not starting please help
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 - th-cam.com/video/GfWJLK6S1Ec/w-d-xo.html
Sir Need a video and small project on React Cookies
awesome
you teach things pretty fast and take some other concepts as granted which makes pretty hard to understand
Please upload class level component vedio
Make a video on redux-saga..
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
The video is nice but as a beginner u are teaching very fast. Sometimes it is hard to grab!
Yes, you are right
Source code
Everything is good but just change your style in the thumbnail. That doesn't feel good in these days.
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.
bhai hindi nhi aati kya...??
Bhai hindi to atti hai but sirf hindi me dekne wali audience nahi hai na.
Haath kyun jodta hai yar