React Hooks in ONE Video 2022 [ EASIEST Explanation ] | React JS Tutorial 

🤩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

Just finished it. It was awesome and easy to understand. No information overload. Thank you so much for making edited quick tutorials.

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 ❤

This is by far the best and well explained hooks tutorial have seen on RU-vid.

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

The best React hooks' course ever. Thanks a lot.

Simple,clean & perfect ❤THANK YOU

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.

oh man , perfect tutorial that i have been searching for. god bless u ........thankyou so much

I have try to watch hooks in many so called famous educator, but you made this with details that is very good think.. ❤️

This is the best video on Hooks. Damn your teaching style is very good and simple. Thanks for your hard work 💪❤️🤠

just finished it , well explained ! thank you

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

You are amazing.The way you explain things is so amazing. Thank You.

It was awesome and easy to understand. Thanks

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. 😊

liking you video with out watching even one hook because your explanation too cooooool🤩

Thanks for making it, it's best one I've seen.

Crystal Clear tutorial, Loved it !

what a explanation ! your explanation way is too awesome 👏

Best tutorial bro and your "take a look" after every statement is pleasant to listen🤣😍😜

Best vidéo bro.. Thx a lot.. Nice, simple and good explanation like a kid can Understand... Omg great work

Great work, thank you!

React Hooks made easy searching lot of videos on youtube this is only one master the React Hooks Thanks❤❤

great tutorial ..👌

The best I have seen... Hats 📴 on your effort❤️

Awesome , 👍 Thank you for clear explanation 😊

bro, i am a beginner and i am amazed ! with tutorial, very easy to understand , thank you!

Subscribed your RU-vid channel . Nice tutorials!

I this you deserved more views and subscribe. Keep it bro I this you will be success one day.❤❤❤

Better way to explanation ❤ great brother

Thank you soo much. One of the best bro😊

Thank you that was helpful. If one understand how redux works he can understand useReducer easily.

Amazing, thank you !

Thank you!

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.

Best teaching atlast I learn abt this topics thank you

Best and Super Video with all the Examples 🎉🎉🎉❤❤

The best React hooks' Video ever.

Great work, thanks a lot

your teaching style is very good and clean .. keep going on....

Nice video and neatly explained.

Thank you very much my teacher. You video is very helpful.

great content🙌

Nice i loved it 😊

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!!

Thanks for such a useful content

Thank you for this tutorial

Thank you for such a huge work, It is extremely clear explanations !!!!!!

great explaination

hey bro cool what a explainaion

content quality is very good.

Thank you

nice video very infomative

Wonderful explanation

very usefull.nice explanation

Life saver

Underrated video

Please make video on advance js😊

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😍

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

you are underated man

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?

very good explanation

Great

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.

27:00 teacher when you use useEffect , you could set up dependencies [name] and the hook will re render only when name gets updated.

very nice explanation

Thanks

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.

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

With useLadoutEffect, how can it read layout (getComputedStyle(), ...) from DOM before the DOM updates are rendered. This doesn't add up for me.

subscribed for the amazing content😍

27:07 is wrong...The state changes continuously due to not having the dependency array of UseEffect. It is not a problem of UseState.

hi , i have a doubt on useLayoutEffect, before Dom printing how to take the ref element from the dom. Please explain that flow.

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

INSTEAD OF USING THE USECONTEXT WE CAN USE STATE AND PROPS?

enteeeeeeeeeeeeeeeeeeekaaaaluuuk!

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

Hello, thanks to this video. Actually you use amazing VS Code templete. Could you share your templete's name?

Can you explain login authentication of jwt in reactjs

Can i get the source code for each hooks

Take aa looook

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.

where is the cheatsheet of useeffect

TOGEL

Could you please share the source code too?

AND TAKE A LOOK!!!!!!

The best React hooks' course ever. Thanks a lot.