Full React Tutorial #20 - Making a Custom Hook 

I love the humility of comments like "Fingers-crossed, this should all work..."

Thank you for this. This whole series has explained Hooks and Props in an outstanding way.

i love the way you explain things, such as 4:30 "this data will not clash with the useState data because it's the local version inside this function" cause it may confuses some people but u made it clear for all of your viewers!

You explained everything in a clean and simple way that no one else did. Thanks, Shaun

I am about half way through this series and I just want to say thank you for the incredible content. Congratulations, not many have the ability to explain things in such a concise yet interesting way.

NetNinja's courses are based on the principle 'do it wrongly to understand it and to never forget'. Brilliant !

I'm working on an app that pulls movies from different genre's via TMDB. It quickly became clear to me that my code was getting beyond repetitive and hard to manage. A custom hook is exactly what I needed. Huge thanks for this Net Ninja. Whenever I do get a job as a React developer, I'll owe a large part of that success to you. Much ❤

Thank you so much for making this video series. You explain the fundamental concepts of React such as hooks, state and props in a clear and easy-to-understand manner, so it really helps me to learn React and get comfortable with using React in my project 🙏🏼

I'm following the series regularly, waiting for the next tutorial. Thanks Shaun you are great

Hey Shaun, you are one of the finest teachers, I've ever encountered. Thanks a lot for offering this amazing content. Your way of explaining things is just awesome. Straight to the point. Loads of love from India. Universe bless you with prosperty, love, health and wealth.

best practice for coding full-on mate, loving the way you simplifying things. Thank you very much !!

So good. Other tutorials on youtube made it way more complicated than it had to be...thank you so much for clearing this up!

This is an incredibly easy-to-follow tutorial on custom hooks. Thanks!

Your courses are clear and concise. Right to the point. Really easy to learn. Especially for the professionals who do not have much time and need to learn React in several days. Huge Thanks!!! Please keep up creating such great content!

React Custom hook is pretty much like Vue Composable, actually they are the same thing, I have just finished Shaun's vue3 course on udemy and this react series helps a lot to understand and compare these two frameworks, thank you Shaun for this terrific chapter !!!

I wish I'd had Shaun as my personal tutor all the way through school. I'd have learned so much more! He breaks it down so you can easily understand each piece so that when he moves on to the next piece, you understand what is going on! I am going to hit JOIN so that he can be my teacher!

Just started this course and I have already built a landing page, something I have been tryjng for a year now, thanks so much

That's what I am waiting for, ❤ Please make it a complete course so that by looking on to documentation we can understand what does it mean, ❤

Thank you SO much! This is the best content I've seen so far... I've learned more in this course than in months of other courses.

Broo you are amazing. I love programming 10 times more because of you!!! Will you do in the future series where you connect backend and frontend...for example django + react or something similar?

I really like this man. I want a teacher like him.

This is one of the most useful modules in the course a great way to abstract out an API call and reuse it with a custom hook. Thanks @Shaun

your React Tutorial series is legendary. huge thanks to you !

That's the best explenation of custom hooks. Thanks a lot.

The best explanation of custom hook implementation on RU-vid

Wonderful and easy way to understand the concept. Thanks a lot. Please, keep creating such wonderful tutorials.

Hey Shaun. You are one of the best teachers on youtube. I find your videos clear and to the point. Hands down the best. I have a query. Hooks can't be used inside other hooks right. So how come useState is working inside the custom hook "useFetch". For me it's giving an error. I watched this video many times. I don’t think I am doing anything different .

Really love the series

I mean, i tried to make tutorials like this 15 years ago (Joomla stuff) - and let me say this: it is very, very - veeeeeery hard. I for myself had to stop every 15 seconds or so, because i messed up and in the end, you find something thats incorrect or not working out as you wished for, so you have to start over from the scratch. So damn respect for those clips Mr. Net Ninja, hands down!

I love this ninja way of toturial 😍❤

Kudos bro, I'm no fan of JavaScript, or should I say 'was'. This tutorial is just perfect

gonna refactor my personal project with custom hook like your way, thanks :)

This is the what i was looking for, you saved my life i was struggling to move the useEffect to another file. Thank you ❤

I just love when all pieces are put in place. Beautiful!

At 4:15 you can just press F2 to rename a variable in VSCode. This will ensure you don't miss any of them and it's much faster

Excellent, clear explanation. This was super helpful in understanding how to create custom hooks. Thank you!

Dude, thank you so much, your videos on react made me get my first job on tech

I have a question. When you have a custom hook and all the states are transferred from Home component to the custom hook, is it still the Home component's states? OR does it become sort of a global state in whichever component that custom hook is used?

Thanks for giving a super practical use case for the example. This makes code very clean and easy to use. ⭐

Thank you Net Ninja for making what seems difficult to understand easy.

Why do we need to add the url as a dependency in useEffect? I thought the useEffect hook would only run if it was called inside a component anyway, so why do we need to specify that it needs to run when the url changes?

I'm starting to enjoy react, everything is clear and concise and pretty much easy to follow, I'm about to finish this series but I constantly going to come back from time to time for revision.

Thank you for this. This is the exact problem I was trying to solve. Starting this course from the beginning.

So much clear in my mind now, with such good explanations! THANK YOU!

Fabulous explaination 👍🏼

Exactly what I've been looking for! Explained so simply 👌

This tutorial has been a blast so far! Great explanation!

Great tutorial, very clear and easy to understand the logic. Thank you so much.

6:18 Do we really need to add the url in the dependencies of useEffect? Cause I think the url is not gonna be changed during the run time of that custom hook, thus putting url will be useless, just putting [ ] is enough to prevent the infinite execution of useEffect whenever the useState data change. I might be wrong. I'm just basing all of that from what I've learned during this series only, I'm only a student lol.

Thank you for your videos. I love the way you explain the concepts along the way.

Really good tutorial and helped me exactly how I needed. I managed to do useFetch myself and get rid of hundreds of lines of duplicate code

That's excellent explanation. The only thing I would like to add in this custom hook is a cleanup function to abort the fetch request in case of unmounting etc.

Very straightforward explaination, thank you very much 😃

Everithing is very clear, thank you sensei❤

Everything that was confusing to me about making custom hooks was explained in less than 9 minutes. I feel like this is my weakest part of React at this moment.... so this video is definitely getting saved in my "React" playlist.

OMG YOU ARE NUMBER ONE NINJA IN THE WEB. Ukraine watching)) thanks so much.

You are the best. Some other channels go at 100mph and I learn nothing.

man you explain like butter

i love you man, your tutorials are simply amazing

Excellent resource. Thanks for you effort mate, appreciate it.

Best tutorial series for react

I am learning so much. Really thank you for this!

Just a note from my observation : the names of returned properties from useFetch() and the names mentioned in destructing properties in home.js if return {data} is mentioned in useFetch , in homejs also it should be {data : alias}= useFetch("url");

Great way to explain this. Thanks a lot! Greetings from Colombia.

Youre the best man....like you are a very good explainer

really thank you for your detailed and clear explanation ❤❤

This is the clear definition that how react context works.

Thank you. I really like your tutorials. Well done!

Your course is very well! Thanks a lot)

You are a gift from the gods.

updating on a bit of an experiment for me. you do not have to name ur custom hooks with "use" at the start of them as they seem to me like regular javascript functions, so even if you name them something else like "FetchItUp69" they will still work, however it is probably a good idea to keep using the "use" before ur hook name to stay consistent. also for whoever cares, the hook will behave like a "class instance" (if ur coming from an OOP POV) for the component it was called on, i share this with u cuz these questions popped in my mind and i started experimenting to find the answers. *I hope im not wrong*

thanks shaun, you're a gifted teacher

it is one of the best learning methods that suit me! thanks👋

As always, superb nugget! Thank You!

Best react course ever

Hi Shaun, thanks for your beautiful video tutorial, can you explain the component communication between sibling. all videos are about parent child, but what about if I have an App.js with 3 components, left, top, bottom and anytime I click on the left component I want to see the detail on the top component and all 3 components are visible on the same page? thanks

Amazing explanation!

Extraordinary explanation dude!

straight to the point. awesome!

ok so, the thing is that i read somewhere that making an explicit request in the page component is considered a bad practice, so I've been trying to use this hook in order to just run an action in the page component, then tree shake the data from the context but I can't use this hook in my context bc the actions that my context runs do not return jsx data, so the useState and useEffect of the hook are invalid inside those functions, what should I do?

For the first time I don't want a tutorial to end - learning so freaking much

thank you, very clear. start to refactor my codes

This is exactly the best tut!!!!!!!!!!! 💗

Although I found it complicated at first, I loved it.

excellent explanation, thank you

Beautiful and easy so far !

this is awesome! the best explanation of the topics/

And I'm sure no one can teach me chart js with react except Mr ninja master

Just on point. Awesome tutorial!

Happy with ur tutorials

You are a real Net Ninja

wow. so well explained. thanks a lot!!!

Thank you a lot for your contribution as an awesome teacher....you are awesome.

Hi, the only thing which I'm not sure of is in regards of putting the URL in the dependency array : I was under the impression that the initial reason we left this empty was based on the idea that we would only need to import the data on the initial render of the component. Why did this change now? By putting the URL in the array, wouldn't this mean we can now import several times data in the same component and not only at its mount? Thanks

You Sir, are a LEGEND !

Thank you Shaun🙌🏾

Thanks for the awesome course! Can the value inside the second parameter of useEffect be anything (function, state, variable)? I thought for some reason it has to be a state.

so elegant, love it!

thanks for the tutorial. Why do you use useEffect inside of the custom hook and not just organize the custom hook as a function that returns your 3 values?

best hooks tutorial thanks