Full React Tutorial #20 - Making a Custom Hook

[@markg5986]

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

[@simpletechtips8442]

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

[@NetNinja]

Glad you enjoyed it! 😃

[@mjylove2]

same here, this video is where i finally understood the custom hook concept

[@BigTime929]

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!

[@ericmomoh7927]

I have struggled with reacts for months until I bumped into this channel. Understanding is here.

[@geojolly7512]

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

[@mircast0]

You do have one. On this channel. And that's awesome! :)

[@peterbrink4421]

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.

[@mysticguava]

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

[@NetNinja]

Thank you! 😃

[@CrazyClips108]

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

[@SkyrimBeast]

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 ❤

[@SamChaneyProductions]

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

[@mr.rambaviskar]

Thanks sam❤

[@Fred_Klingon]

I'm following the whole course since the first lesson, I really like your explanations, not too fast but straight to the point. Also this episode is really gold! I always avoided React in these years, but in this lesson I can see that if used properly, it makes code reuse and readability very easy!

[@louis_dev6981]

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 🙏🏼

[@unknownman1]

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

[@Onyecode]

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

[@NetNinja]

Happy to help!

[@kevinnzeng7081]

You are great Shaun ! Your courses are so fluid, clear that everything look so easy with you. Thanks a lot

[@MrRobeezy29]

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

[@alexgrinberg1888]

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!

[@nroshstp]

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

[@NetNinja]

Thank you 😃

[@maskman4821]

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

[@NetNinja]

Yeah - they are very similar.

[@PavanKumar-tt6tw]

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.

[@NetNinja]

Thank you so much for your support Pavan :)

[@sueholder703]

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!

[@sueholder703]

I don't see JOIN, I see SEE PERKS!

[@NetNinja]

Thanks so much :)

[@tehtriangle6660]

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

[@philjacks8531]

This is an amazing React course. This lesson is awesome, I can see myself reusing this in many projects. Thanks for all your content.

[@johnconnor9787]

The best explanation of custom hook implementation on KZbin

[@matheusschlosserbasso5649]

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.

[@ruziatepvp]

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!

[@nielfollero5]

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.

[@rpanda_old]

i have the same doubt. I didnt understand why URL is added as a dependency to the hook

[@Alphashow7]

Same thoughts, considering that url is not even a state, can the useEffect even react to a variable that isn't a state ?

[@vladyslavstadnyk2762]

Following the logic of states, probably to prevent doing not necessry backend calls on any possible re-renders of other components non related to the url.

[@sumisastri5681]

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

[@akinrotimidaniel2325]

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

[@levaniakobidze8202]

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

[@NetNinja]

You're welcome! hope it was helpful :)

[@darumaleo]

that was really smooth and satisfying to watch

[@priyankkharat7407]

Really love the series

[@kristofferjohansson3768]

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

[@sushilbalami]

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

[@MrGlujaN]

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

[@learningit2572]

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

[@devapps-uk]

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

[@napsarenice]

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

[@spondoolie6450]

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.

[@aarensan]

Best I've seen so far! Very comprehensible.

[@Yahya-u5x]

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

[@NetNinja]

Glad to hear that! :) thanks

[@muhammadjonnazarov146]

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

[@NetNinja]

Thank you muhammad :) much appreciated!

[@mjylove2]

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

[@NetNinja]

I appreciate that! :) thanks so much for watching

[@markyanthonylaredo2614]

I love this ninja way of toturial 😍❤

[@franjosipovic5766]

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?

[@NetNinja]

Yeah I will be doing a more full-stack project in the future :)

[@bofinannhor3566]

you are the first teacher that made me understand the react

[@RizkyGusna]

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

[@Kilopillz]

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

[@ashwinsuryawanshi]

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

[@mpho438]

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.

[@ayinlaoluwafemi1993]

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

[@Shahzaib_Atif]

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.

[@CptBouchard]

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

[@royataleghani6519]

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

[@NetNinja]

You're very welcome! Thanks for watching Roya

[@urbainquentin1663]

Best react course ever

[@NetNinja]

Thanks Urbain

[@lukasluftlaufer1093]

Exactly what I needed! Thanks Shaun! 🧡

[@michaelzucker772]

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

[@keishawaithe-johnson5034]

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

[@rohan1765]

Fabulous explaination 👍🏼

[@HostDotPromo]

Agreed, very easy to understand.

[@m_imran_khan]

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

[@MiikaKontio]

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

[@lokmanhossainpappu5096]

Love you shaun. And love your awesome content. Your content better than paid course. keep going

[@hseinb]

thanks shaun, you're a gifted teacher

[@krish4659]

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");

[@trangnusi13]

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

[@mohamedamin-g3f7n]

i love you man, your tutorials are simply amazing

[@NetNinja]

Thanks Mohamed, that means a lot :)

[@VS257]

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?

[@rpanda_old]

i have the same doubt

[@keifonlee8342]

same doubt and don't cant find the answer

[@miladnouri4364]

I think the custom hook is specific to whatever component is using it, changing the state data in one component will not cause to change data in another component, even if they are both using the same custom hook. To share state data across multiple components in a large project, you should use Redux or React Context.

[@FahadKhan-rp3rz]

This is the clear definition that how react context works.

[@ibadshaikh2215]

Extraordinary explanation dude!

[@frazbakht4480]

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

[@deepakkvijayan]

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 .

[@Anteater23]

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

[@waltergermanes4528]

Very straightforward explaination, thank you very much 😃

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

[@ghofranedarragi5601]

really thank you for your detailed and clear explanation ❤❤

[@bassamsaleh5396]

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*

[@MultiTrickster121]

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?

[@woofcode3383]

As always, superb nugget! Thank You!

[@asifurrahman8257]

man you explain like butter

[@emmanuelngwenya9845]

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

[@CreativeTutorialsWeb]

Love your courses bro keep rising full support from me

[@chasec4897]

You are a gift from the gods.

[@lucasfernandes9381]

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

[@corsaronero5619]

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

[@megaguys-b8k]

Everithing is very clear, thank you sensei❤

[@NetNinja]

Awesome, thanks for watching!

[@sohaibkhan845]

Best tutorial series for react

[@mew6085]

Your course is very well! Thanks a lot)

[@mhassankhan8677]

straight to the point. awesome!

[@lucasmaus9597]

Just on point. Awesome tutorial!

[@xxxxxzzee23]

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

[@AbhishekVaid]

at 6:21, the fact that url is passed into dependency array doesn't make sense since it's just variable and not a useEffect type entity

[@mariampureliani7215]

Love the way you explain every detail! 💫 You da Best 💯❤

[@MuhammadSaaddev]

You Sir, are a LEGEND !

[@abtaf7449]

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

[@NetNinja]

Glad to hear that! thanks Abtaf

[@cartman42069]

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

[@GintasLtu]

At lesson 20 have issues with "Unexpected token '

[@vladyslavstadnyk2762]

Because you've got not valid json response. It's related to the CORS, I suppose, struggling with the same error.

[@ZTF666]

Beautiful and easy so far !

[@Vincent1990-l1y]

God damn it, I really enjoy of watching these tutorials! Damn you're good

[@TheNamesJT]

I'm confused with the object de-structuring cause it looks similar to setting a value for an object key example {id: 1} here we set 1 to be the value of id but when you use {data: blogs} this is just renaming it and doesn't change its value and what it returns. How can you tell the difference?

[@farhanaditya2647]

When you're setting a value, you're assigning the object to a variable. But when you destructure an object, you grab the values from a variable. // assignment let variable = { key: value } // destructure let { key: value } = variable

[@cryptopinky2355]

this is awesome! the best explanation of the topics/

[@terjemah_alquran]

thank you, very clear. start to refactor my codes