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

@CodeBlessYou

Жыл бұрын

Thanks for your support❤❤❤

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 ❤

@CodeBlessYou

9 ай бұрын

Thank you so much for your feedback. If you like this tutorial, checkout full react course. I just uploaded today❤❤

@shantanu2322

9 ай бұрын

@@CodeBlessYou sure brother i will definitely watch

Simple,clean & perfect ❤THANK YOU

@CodeBlessYou

9 ай бұрын

❤❤❤

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

@CodeBlessYou

7 ай бұрын

Glad you liked it!

just finished it , well explained ! thank you

@CodeBlessYou

Жыл бұрын

Thanks for watching. Really grateful for that❤❤

This is by far the best and well explained hooks tutorial have seen on KZread.

@CodeBlessYou

Жыл бұрын

Thanks for your comment🙌❤

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

@CodeBlessYou

Жыл бұрын

Thanks for this comment😇❤

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.

@CodeBlessYou

28 күн бұрын

❤❤❤

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

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

@CodeBlessYou

3 ай бұрын

Thank you so much for this comment. I really really grateful for your love and support❤❤❤

Crystal Clear tutorial, Loved it !

@CodeBlessYou

4 ай бұрын

Thanks for your support❤❤❤

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

@CodeBlessYou

Жыл бұрын

Thank you so much for this comment!! It really inspired me for making more tutorials... Grateful for this❤😇

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

@CodeBlessYou

Жыл бұрын

My pleasure 😀

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

@CodeBlessYou

Жыл бұрын

Thanks 😀❤

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

@CodeBlessYou

3 ай бұрын

Thank you so much for your support and trust❤❤❤

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

@CodeBlessYou

Жыл бұрын

Sure I will create tutorial on React Beginner Project. Thank you so much for your comment and support. Grateful for that😇❤

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

@CodeBlessYou

Жыл бұрын

Thank you so much for your support ❤️😇

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

@CodeBlessYou

Жыл бұрын

Thank you so much for this comment❤

Awesome , 👍 Thank you for clear explanation 😊

@CodeBlessYou

4 ай бұрын

Grateful for that❤❤❤

Great work, thank you!

@CodeBlessYou

Жыл бұрын

My pleasure! Thanks for comment❤

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

@CodeBlessYou

13 күн бұрын

Glad to hear that❤❤❤

Amazing, thank you !

@CodeBlessYou

Ай бұрын

❤❤❤

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

@CodeBlessYou

3 ай бұрын

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

Subscribed your KZread channel . Nice tutorials!

@CodeBlessYou

Жыл бұрын

Thank you so much for your support. Really grateful for that😇❤❤

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

@CodeBlessYou

3 ай бұрын

Thank you so much. Grateful for your support❤❤❤

Thank you soo much. One of the best bro😊

@CodeBlessYou

10 ай бұрын

😇😇❤❤

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

@CodeBlessYou

8 ай бұрын

Thank you so much for your feedback❤❤❤❤

Thank you!

@CodeBlessYou

24 күн бұрын

❤❤❤

Nice video and neatly explained.

@CodeBlessYou

Жыл бұрын

Thanks 😀

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

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

@CodeBlessYou

7 ай бұрын

Thank you so much❤❤

Great work, thanks a lot

@CodeBlessYou

11 ай бұрын

❤❤❤

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

@CodeBlessYou

9 ай бұрын

You are commenting this, thats success for me ❤❤❤

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

@CodeBlessYou

Жыл бұрын

Thank you for this comment❤ Grateful for this comment😇

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

@CodeBlessYou

Жыл бұрын

Thank you so much for your support😇❤❤

Best teaching atlast I learn abt this topics thank you

@CodeBlessYou

Жыл бұрын

Thank you so much for support. Really grateful for that❤️😇

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

@CodeBlessYou

Жыл бұрын

Agreed! Thanks for this comment😇❤

great tutorial ..👌

Better way to explanation ❤ great brother

@CodeBlessYou

Ай бұрын

❤❤❤

Thank you!!

@CodeBlessYou

6 ай бұрын

❤❤❤

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

@CodeBlessYou

Жыл бұрын

My pleasure, Thanks for your comment😀

great content🙌

@CodeBlessYou

Жыл бұрын

Grateful for your support😇❤

Bhai badhiya explanation tha..God Bless You🫡❤

@CodeBlessYou

2 ай бұрын

❤❤❤

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.

@CodeBlessYou

Жыл бұрын

I will share that soon👍

@techieaman96

Жыл бұрын

@@CodeBlessYou thank you

This is the best tutorials on hook i think, what why where when everything is at place

@CodeBlessYou

9 ай бұрын

❤❤❤

Thanks for such a useful content

@CodeBlessYou

3 ай бұрын

❤❤❤

Nice i loved it 😊

@CodeBlessYou

Ай бұрын

❤❤❤

The best React hooks' Video ever.

@CodeBlessYou

6 күн бұрын

Thank you so much ❤❤❤

Thank you

@CodeBlessYou

7 ай бұрын

❤❤

great explaination

@CodeBlessYou

6 ай бұрын

❤❤❤

very usefull.nice explanation

@CodeBlessYou

2 ай бұрын

❤❤

Thank you for this tutorial

@CodeBlessYou

Жыл бұрын

Thanks for your Feedback😀

🤩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

nice video very infomative

@CodeBlessYou

5 ай бұрын

Glad you liked it😊

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

@CodeBlessYou

7 ай бұрын

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.

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

content quality is very good.

@CodeBlessYou

7 күн бұрын

❤❤❤

hey bro cool what a explainaion

@CodeBlessYou

4 ай бұрын

Glad to hear 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?

@CodeBlessYou

Жыл бұрын

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

@surajchaudhary1162

Жыл бұрын

@@CodeBlessYou eagerly waiting for the redux course. 🤗

@CodeBlessYou

Жыл бұрын

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

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😍

@CodeBlessYou

Жыл бұрын

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 KZread about redux ❤

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

@CodeBlessYou

11 ай бұрын

The goal of that example is to demonstrait infinite rerenders.

@abrahamjaimes7643

11 ай бұрын

@@CodeBlessYou got it , teacher when are you going to complete all the hooks in videos ?

@CodeBlessYou

11 ай бұрын

@@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❤❤

very nice explanation

@CodeBlessYou

Жыл бұрын

Thank you so much for support❤❤

Underrated video

@CodeBlessYou

Жыл бұрын

Thank you so much for your support😇❤❤

you are underated man

@CodeBlessYou

11 ай бұрын

I will get what I deserve. Don't worry chill❤❤❤😉😉

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.

@CodeBlessYou

5 ай бұрын

Absolutely Correct. You can organize reducer by seperating reducer function from component code. Glad for your comment :)

subscribed for the amazing content😍

@CodeBlessYou

4 ай бұрын

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

@user-yk3yt4vk9j

4 ай бұрын

@@CodeBlessYou oh boy it's quite expensive for me as living in Pak. But you have my all support on youtube. 🌺🌺

@CodeBlessYou

4 ай бұрын

Thank you so much for your support brother@@user-yk3yt4vk9j ❤❤❤

@user-yk3yt4vk9j

4 ай бұрын

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

@CodeBlessYou

4 ай бұрын

@@user-yk3yt4vk9j It means a lot to me. I just want love, money will come if I am capable. Love you brother❤❤

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.

@CodeBlessYou

6 ай бұрын

Incredible Work! Love it ❤❤❤

Great

@CodeBlessYou

5 ай бұрын

Thanks for watching❤

Thanks

@CodeBlessYou

7 ай бұрын

❤❤

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

@CodeBlessYou

5 ай бұрын

My name is Meet Patel. Thank you so much for this comment❤❤❤

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

@CodeBlessYou

18 күн бұрын

I will check that

Can you explain login authentication of jwt in reactjs

@CodeBlessYou

Жыл бұрын

Why not😀

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

@CodeBlessYou

Жыл бұрын

I use AYU theme in VS code. These are my 5 BEST VS Code theme - kzread.info/dash/bejne/d3uVpZRspNDQmMY.html

@sacettinsahin7791

Жыл бұрын

@@CodeBlessYou Thank you to response, i subscribed and liked :)

@CodeBlessYou

Жыл бұрын

@@sacettinsahin7791 Thank you so much for your support. Really grateful for that😇❤

enteeeeeeeeeeeeeeeeeeekaaaaluuuk!

Can i get the source code for each hooks

@CodeBlessYou

2 ай бұрын

Sorry I forgot to take backup for each hook. Really really sorry

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

@CodeBlessYou

Ай бұрын

Yeah It can❤❤❤

where is the cheatsheet of useeffect

@CodeBlessYou

Жыл бұрын

Sorry I forget To mention.. Check in Description

@shinchanshukla3938

Жыл бұрын

Saikrishna, Say thanks to CBY.

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.

@CodeBlessYou

Жыл бұрын

Ok I will work on that. Thank for your feedback brother😇❤

Take aa looook

@CodeBlessYou

6 ай бұрын

😅😅😉

Could you please share the source code too?

@CodeBlessYou

Жыл бұрын

I will try to create one Github Repo but first I need to find this code🙂 (Sorry for that)

@andrews13

Жыл бұрын

@@CodeBlessYou Thanks! Waiting for it :)

TOGEL

AND TAKE A LOOK!!!!!!

@CodeBlessYou

3 ай бұрын

😅😅❤❤

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

@CodeBlessYou

3 ай бұрын

Thank you so much for this comment. Really grateful for that❤❤❤