React Hooks in ONE Video 2022 [ EASIEST Explanation ] | React JS Tutorial
HTML-код
- Опубликовано: 14 авг 2024
- 🎓Get FREE access to my upcoming Ultimate Node.js Course for the FIRST 100 students: forms.gle/8m9X... 🚀
🤩Access the Full React Course - www.udemy.com/...
🗒️MY FAVORITE TOOLS & GEARS
Height Adjustable Desk - amzn.to/42qPZkb
Old Desk in Budget - amzn.to/3UlaFbm
Favorite Laptop - amzn.to/3OrqmKa
LG Monitor for Productivity - amzn.to/3uqA5tv
Silent Keyboard(Loved It) - amzn.to/3UjagGv
Mouse & Keyboard Combo - amzn.to/3Sq50hs
Extra Large Mouse Pad - amzn.to/48Nhcjv
Sony Headphones - amzn.to/3HHjYed
Cheap Earphones for Editing - amzn.to/48eBykN
Daily Use Laptop Stand - amzn.to/3Uj8JQL
Mini Speakers for Consuming Content - amzn.to/48YgAaK
Mport X Connector - amzn.to/3UoHsML
Mic - amzn.to/48eCrtD
3 Color Lightbar - amzn.to/42qgaaW
Dual Monitor Stand - amzn.to/48Nixa1
Stop Watch for Productivity - amzn.to/3Un1RBW
Dotted Diary - amzn.to/3vYBWq1
🚀Access REDUX Course:- www.udemy.com/...
Learn All React Hooks in One Video. Stating with most popular hook useState and then useEffect, useContext, useRef and much more. After completing this react hooks tutorial, you will ready for apply hooks on your react projects.
UseEffect CHEATSHEET : drive.google.c...
Topics Covered in This Tutorial
- What are hooks? Why we need it?
- useState, useEffect, useContext
- useRef, useReducer, useLayoutEffect
- useMemo, useCallback, Custom hooks
Overview
00:00 Introduction
00:15 What are hooks?
01:16 useState
09:38 useEffect
18:28 useContext
25:30 useRef
32:15 useReducer
39:42 useLayoutEffect
45:10 useMemo
49:59 useCallback
55:07 Custom Hooks
Social Media Links:
🚀COURSES : www.udemy.com/...
🤩INSTAGRAM : / code_blessyou
💙FACEBOOK : / 100077716056158
🐦TWITTER : / code_blessyou
😎LINKEDIN : / code-bless-you-5b76822b
Copyright Clips
Video by Jack Sparrow : www.pexels.com...
Video by cottonbro: www.pexels.com...
Video by fauxels: www.pexels.com...
Tags
react js tutorial,react tutorial,react hooks,usememo,react tutorial for beginners,useref,useeffect react hooks,usereducer,usecontext,usestate react,hooks in react js,hooks react,react hooks tutorial,usecallback,custom hooks react,uselayouteffect,all react hooks,usestate,react js,reactjs,reactjs tutorial,usecallback react hooks,react custom hooks,react js hooks,reactjs hooks,usecontext react hooks,react hooks explained,useEffect,react hook
React Hooks in one video, React hooks crash course, React hooks in one hour, React Hooks tutorial
![[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒](/img/1.gif)
🎓Get FREE access to my upcoming Ultimate Node.js Course for the FIRST 100 students: forms.gle/8m9XA7kmc17nHfhz8 🚀
🤩Access the Full React Course - www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD
🚀Access REDUX Course:- www.udemy.com/course/the-ultimate-redux-course-state-management-library/?referralCode=0E6517D629498E1C48D7
I knew react.js . but after watched you video. I would say that is not true. Mind blowing Explanation in easy words brother very very thank you from deepest of my heart ❤
Thank you so much for your feedback. If you like this tutorial, checkout full react course. I just uploaded today❤❤
@@CodeBlessYou sure brother i will definitely watch
Just finished it. It was awesome and easy to understand. No information overload. Thank you so much for making edited quick tutorials.
Thanks for your support❤❤❤
This is by far the best and well explained hooks tutorial have seen on RUclips.
Thanks for your comment🙌❤
Downloaded it to watch offline, but the incredible depth brought me back just to hit like and subscribe. 🌟 If I didn't, I'd genuinely regret not supporting a channel that goes above and beyond. Kudos for the fantastic content! 👏
Thank you so much for this comment. I really really grateful for your love and support❤❤❤
I don't have words to say that you have done for react js community... This video is a masterpiece... Thanks a lot...
Please bring some intermediate level projects using React js on this channel. 😊
Sure I will. You can check also my React JS course - www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD
I have try to watch hooks in many so called famous educator, but you made this with details that is very good think.. ❤️
Thanks 😀❤
The best React hooks' course ever. Thanks a lot.
Thanks for this comment😇❤
Thanks for on to the point information and examples.
You got a new subscriber.
I usually do not comment, but you deserve it brother, keep it up the good work.
Thank you so much. Grateful for your support❤❤❤
One of the best video i ever seen on the internet for react hooks. Just watch this video once and understand all hooks. Thanks a lot.
❤❤❤
The best useState course I have taken. I have subscribed. Please do more tutorial on building projects for beginners and also simplifying more concepts. Thanks
Sure I will create tutorial on React Beginner Project. Thank you so much for your comment and support. Grateful for that😇❤
Thank you, One of the best videos I watched for react hooks. It would have been nice if you have shared all the code examples.
I will share that soon👍
@@CodeBlessYou thank you
This is the best video on Hooks.
Damn your teaching style is very good and simple.
Thanks for your hard work 💪❤️🤠
Thank you so much for this comment❤
Simple,clean & perfect ❤THANK YOU
❤❤❤
00:00 🎓 React Hooks are functions that enable the use of state and lifecycle methods in functional components, making them work similarly to class components.
02:03 🪝 useState hook is used to add state to functional components. It returns an array with the current state value and a function to update that value.
03:25 🔄 Updating state with useState involves calling the function returned by the hook and passing the new value. Array destructuring can be used to simplify the code.
04:51 📥 useState can handle different types of data (boolean, number, text, object, array). It's demonstrated with examples of a counter and a text input.
06:03 🔄 When dealing with an object as state in useState, ensure to update the state properly to avoid losing other elements. Use the spread operator to include previous values.
08:58 🎭 useEffect is used for side effects in components, such as fetching data, manipulating the DOM, or using timers. It combines componentDidMount, componentDidUpdate, and componentWillUnmount.
11:27 📋 useEffect has three variations: without dependencies (runs on every change), with an empty array (runs once on mount), and with variables (runs on mount and when specified variables change).
15:22 🧹 Cleanup functions in useEffect are essential to handle scenarios where side effects need to be stopped or cleaned up, preventing performance issues.
18:34 🌐 useContext is used to manage global data in React, allowing components to access shared values without passing them through props.
23:10 📦 To use useContext, follow three steps: create the context, provide the context in the component hierarchy, and consume the context using the useContext hook.
25:42 🔍 useRef serves two main purposes: creating mutable variables without causing re-renders and accessing DOM elements directly.
28:17 🔄 Using useRef to count renders without causing re-renders, avoiding the infinite loop issue that might occur with useState.
28:56 🔄 Use useRef to access and manipulate DOM elements without re-rendering. The current property is used to interact with the element.
32:24 🔄 useReducer is a state management tool in React for managing complex states. It takes a reducer function and an initial state, returning an array with the current state and a dispatch function.
40:14 🌐 useLayoutEffect is similar to useEffect but runs before the DOM is painted. It's synchronous and commonly used for measuring and working with layout dimensions.
45:14 ⚡ useMemo is used for memoization in React, preventing expensive calculations on every render. It takes a callback function and a dependency array, returning a memoized value.
49:59 🤔 useCallback returns a memoized function, preventing function recreation on re-render. It has the same syntax as useMemo, with the difference that it returns a function.
55:22 🛠 Custom hooks are reusable functions in React, created for specific logic or use cases. They enhance code organization and maintainability, promoting the DRY (Don't Repeat Yourself) principle.
Incredible Work! Love it ❤❤❤
this comment needs to be pinned
Bro I like your teaching method and now I understand all hooks to watch this video.
Glad to head that❤❤❤
oh man , perfect tutorial that i have been searching for. god bless u ........thankyou so much
Glad you liked it!
React Hooks made easy searching lot of videos on youtube this is only one master the React Hooks Thanks❤❤
Thank you so much. Grateful for your support❤❤❤
Best tutorial bro and your "take a look" after every statement is pleasant to listen🤣😍😜
😅😅❤❤❤
Loved the way u explained everything in such a simple and elegant way
All the best!!
Thank you so much❤❤❤
You are amazing.The way you explain things is so amazing.
Thank You.
Thank you so much for this comment!! It really inspired me for making more tutorials... Grateful for this❤😇
Best Explanation of React Hooks
❤❤❤
Crystal Clear tutorial, Loved it !
Thanks for your support❤❤❤
liking you video with out watching even one hook because your explanation too cooooool🤩
Thank you so much for your support and trust❤❤❤
Thank you very much my teacher. You video is very helpful.
Thank you for this comment❤ Grateful for this comment😇
Thanks for making it, it's best one I've seen.
My pleasure 😀
bro, i am a beginner and i am amazed ! with tutorial, very easy to understand , thank you!
Thank you so much❤❤
The best React hooks' Video ever.
Thank you so much ❤❤❤
just finished it , well explained ! thank you
Thanks for watching. Really grateful for that❤❤
its very good , so clear to the point
thanks for the effort, can you please tell which theme are you using in vs code?
AYU MIRAGE BORDERD
Wonderful explanation
❤❤❤
what a explanation ! your explanation way is too awesome 👏
Thank you so much❤❤❤
content quality is very good.
❤❤❤
Best vidéo bro.. Thx a lot.. Nice, simple and good explanation like a kid can Understand... Omg great work
Glad to hear that❤❤❤
your teaching style is very good and clean .. keep going on....
Thank you so much for your support😇❤❤
14:39 issue in explanation
useEffect
document.title is taken only othercount then how can it take count while clicking increase count their is no need of dependency
dependency is to be given if we take
document.title = `count: ${count} & newCount: ${newCount}`
if we want to change only on change of count then we need to give count as dependency
It was awesome and easy to understand. Thanks
Thank you so much❤❤❤
Please make video on advance js😊
Bhai badhiya explanation tha..God Bless You🫡❤
❤❤❤
This is the best tutorials on hook i think, what why where when everything is at place
❤❤❤
Thank you that was helpful.
If one understand how redux works he can understand useReducer easily.
Agreed! Thanks for this comment😇❤
Nice video and neatly explained.
Thanks 😀
I this you deserved more views and subscribe. Keep it bro I this you will be success one day.❤❤❤
You are commenting this, thats success for me
❤❤❤
Best and Super Video with all the Examples 🎉🎉🎉❤❤
Thank you so much for your feedback❤❤❤❤
Best teaching atlast I learn abt this topics thank you
Thank you so much for support. Really grateful for that❤️😇
its extremely simple and crisp explanation bro. Thanks a million❤ I just need all the notes which you used in the video. Would you provide us?
Actually, I am currently working on Complete Redux Course.
That's why it will take some time. But I will provide as soon as possible. Sorry For Delay❤❤
@@CodeBlessYou eagerly waiting for the redux course. 🤗
It's already launched.. Hurry up Get this course *100% FREE* from here - www.udemy.com/course/the-ultimate-redux-course-state-management-library/?couponCode=07423F2A93D56EE560CE
The best I have seen...
Hats 📴 on your effort❤️
Thank you so much for your support ❤️😇
very good explanation
❤❤❤
Awesome , 👍 Thank you for clear explanation 😊
Grateful for that❤❤❤
great explaination
❤❤❤
27:07 is wrong...The state changes continuously due to not having the dependency array of UseEffect. It is not a problem of UseState.
I will check that
Hii CodeBlessYou , i have a dought that in useState while passing a object when i enter the name and increseing the count then is it showing NAN times can i know why and name is not printing...hope i get a answer for that
When you update your value, you have to fill that object first with the previous values and then update name property of the state object. If you still confused, you can simply console both state and your name property to see what is happening.
Better way to explanation ❤ great brother
❤❤❤
With useLadoutEffect, how can it read layout (getComputedStyle(), ...) from DOM before the DOM updates are rendered. This doesn't add up for me.
Nice i loved it 😊
❤❤❤
Thank you for such a huge work,
It is extremely clear explanations !!!!!!
My pleasure, Thanks for your comment😀
Amazing, thank you !
❤❤❤
27:00 teacher when you use useEffect , you could set up dependencies [name] and the hook will re render only when name gets updated.
The goal of that example is to demonstrait infinite rerenders.
@@CodeBlessYou got it , teacher when are you going to complete all the hooks in videos ?
@@abrahamjaimes7643 Currently I am working on React Course and it is taking more time than i imagine. In that course I will add useful hooks❤❤
Thanks for such a useful content
❤❤❤
Thank you!
❤❤❤
very usefull.nice explanation
❤❤
hey bro cool what a explainaion
Glad to hear that❤❤❤
INSTEAD OF USING THE USECONTEXT WE CAN USE STATE AND PROPS?
Yes we can. But when you have so much props drilling then use useContext
Thank you soo much.
One of the best bro😊
😇😇❤❤
Great work, thank you!
My pleasure! Thanks for comment❤
Life saver
❤❤❤
Subscribed your RUclips channel . Nice tutorials!
Thank you so much for your support. Really grateful for that😇❤❤
Thank you!!
❤❤❤
nice video very infomative
Glad you liked it😊
great tutorial ..👌
Great work, thanks a lot
❤❤❤
one thing that i have notice is the reducer can put in folder called Reducer to make looks more organize, am i right? , . . im currently studying react hooks and your explanation makes me confident to use react hooks.
Absolutely Correct. You can organize reducer by seperating reducer function from component code. Glad for your comment :)
Underrated video
Thank you so much for your support😇❤❤
Bro ur underrated, dont worry keep it up
what's your name bro,
Thank you for video,
If you know, make nextjs video, i dont know if it has
My name is Meet Patel. Thank you so much for this comment❤❤❤
Thank you
❤❤
you are underated man
I will get what I deserve. Don't worry chill❤❤❤😉😉
Thank you for this tutorial
Thanks for your Feedback😀
Shaandar video hai Bhai very nice
Har har Mahadev Ji 🙏
Thank you brother.
Namah parvati pataye Har Har Mahadev🔱🕉❤
great content🙌
Grateful for your support😇❤
hi , i have a doubt on useLayoutEffect, before Dom printing how to take the ref element from the dom. Please explain that flow.
To obtain a reference to a DOM element before it gets printed or rendered, you can use the useLayoutEffect hook in a React component. Here's a step-by-step explanation of how to achieve this:
Create a Functional Component:
Create a functional component in which you want to obtain a reference to a DOM element.
function MyComponent() {
// Create a ref to store the DOM element reference
const myElementRef = useRef();
// Define a function to capture the reference to the DOM element
useLayoutEffect(() => {
const element = myElementRef.current;
if (element) {
// Now, you can work with 'element'
console.log('Reference to the DOM element:', element);
// Perform any actions you need with the element here
}
}, []);
return (
{/* Attach the ref to the DOM element you want to capture */}
This is the DOM element.
);
}
Use useLayoutEffect:
Inside the component, use the useLayoutEffect hook to capture the reference to the DOM element. The useLayoutEffect hook runs after the browser layout and before the paint, making it suitable for working with DOM elements.
Attach the Ref to the DOM Element:
Within your component's JSX, attach the ref to the specific DOM element you want to capture. In this example, we attached the myElementRef to a div element, but you can attach it to any DOM element as needed.
Access and Use the DOM Element:
Inside the useLayoutEffect, you can access the DOM element using the current property of the ref. Once you have the reference, you can perform any actions or operations you need with the element. In the example, we log the reference, but you can modify it according to your requirements.
By following this approach, you can capture a reference to a DOM element and perform actions on it before it gets printed or rendered. This is particularly useful for tasks like obtaining the dimensions of an element, setting up event listeners, or manipulating the DOM before rendering.
Thanks
❤❤
It Hooks Concept is very easy understand for your video watching so please continue with other new concepts except the Life
cycle method and Redux concepts make video please, and Thank for this video😍
I have complete course on Redux you can check this out - www.udemy.com/course/the-ultimate-redux-course-state-management-library/?referralCode=0E6517D629498E1C48D7
Also one hour trail course is on RUclips about redux
❤
Great
Thanks for watching❤
It looks like a 1 hour video but I bet you it will take up to 4 hours if you run all codes and take notes
Yeah It can❤❤❤
very nice explanation
Thank you so much for support❤❤
subscribed for the amazing content😍
Thank you so much. If you like this then You can Check my complete React JS course 2024 : www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD
@@CodeBlessYou oh boy it's quite expensive for me as living in Pak. But you have my all support on youtube. 🌺🌺
Thank you so much for your support brother@@user-yk3yt4vk9j ❤❤❤
@@CodeBlessYou when I watch your videos I don't skip adds. That's the only way I could support you now. But in future if someone ask me about sources from where I have learnt then I would definitely recommend him your channel.
@@user-yk3yt4vk9j It means a lot to me. I just want love, money will come if I am capable. Love you brother❤❤
Can i get the source code for each hooks
Sorry I forgot to take backup for each hook. Really really sorry
enteeeeeeeeeeeeeeeeeeekaaaaluuuk!
Can you explain login authentication of jwt in reactjs
Why not😀
Hello, thanks to this video. Actually you use amazing VS Code templete. Could you share your templete's name?
I use AYU theme in VS code. These are my 5 BEST VS Code theme - ruclips.net/video/EGaC23tmjhc/видео.html
@@CodeBlessYou Thank you to response, i subscribed and liked :)
@@sacettinsahin7791 Thank you so much for your support. Really grateful for that😇❤
This is brilliant explanation.
But you are too fast before I can wrap my head around a concept u have already explained 3 more. Pls slow down, reduce Ur speed by half thank you.
Ok I will work on that. Thank for your feedback brother😇❤
Take aa looook
😅😅😉
TOGEL
where is the cheatsheet of useeffect
Sorry I forget To mention.. Check in Description
Saikrishna, Say thanks to CBY.
Could you please share the source code too?
I will try to create one Github Repo but first I need to find this code🙂 (Sorry for that)
@@CodeBlessYou Thanks! Waiting for it :)
AND TAKE A LOOK!!!!!!
😅😅❤❤
The best React hooks' course ever. Thanks a lot.
Thank you so much for this comment. Really grateful for that❤❤❤