Create A Custom Hook in React | React Hooks Tutorial

In this video I go over how to create a custom hook in create. We utilize 2 examples for this: A Random Color Generator, and A UseQuery Hook.
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: [e-mail]
Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🌟 Algorithm Book To Pass Coding Interviews: amzn.to/2Z2CirS
🌟 Microphone: amzn.to/2MKAm4V
🌟 Keyboard: amzn.to/3tvU6ZR
🌟 HD Webcam: amzn.to/3tMpJPD
🌟 Room LED Lights: amzn.to/3a5mFGp
Tags:
- Custom Hooks
- Fetch
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[@codebreakthrough]

congrats on reaching your 10K subscriber goal!

[@PedroTechnologies]

Thank you so much Caleb! I remember watching your old c++ vids and I really liked them, glad to see you here!

[@rohmaabdulfattah2582]

Very good.! Of all the videos I've watched, this explains in all in a simple and clear term

[@CuteCreeperYT]

Excellent work you've put up there Pedro.
I mean this is just everything, if the basic is clear, complex logic can be implemented with much less efforts.

[@tomasgilamoedo8301]

Great explanation Pedro! keep on moving brobro, u reaching 50k soon! 🙌

[@spondoolie6450]

Congrats on reaching your 10k subscriber goal
(I think I was number 30-something thousand subscriber)

[@bonifacetom7116]

Thanks so much bro for the wonderful explanation with simple code implementation. You just saved me

[@cliffvbajo]

A good starting point to learn custom hooks! thank you

[@k303k]

Really appreciated for your efforts for making videos.Thanks a lot .

[@paras5345]

this video was clean srsly watched bunch on this topice but this is most clear

[@danielrahmani7075]

You are amazing dude . Keep going man❤️🤝

[@hosseinnouri4065]

thank u , i finally learn how to write custom hooks

[@khandoor7228]

Excellent work Pedro, I like the simple example followed by a real world example, good technique.

[@PedroTechnologies]

Glad you liked it! I am trying out different styles of tutorials!

[@MindOFAlfie]

Perfect tutorial!

[@maxmaksum4673]

great as always..thank you

[@PedroTechnologies]

Thanks you for watching!

[@abhaytiwari6411]

I admire your work

[@PedroTechnologies]

Thank you so much! This support motivates me a lot!

[@Lohitpant]

Thanks. Completed it and after seeing so many Indian dishes, I am hungry.

[@PedroTechnologies]

hahaha enjoy lunch

[@mahendranath2504]

Thank you 👍🏼❤️🙏

[@PedroTechnologies]

No problem 😊 Glad you liked it!

[@chinthana]

Great video.. Thanks..

[@PedroTechnologies]

Glad you liked it!

[@subliminakeys1674]

If you used that hook multiple times in your code wouldn't you need to destructure it to a different variable everytime?
Example you have 'response' but if you copied and pasted that multiple times like you did at the end wouldn't it give an error? I'm assuming you would need to make the first usehook variable response then the second like response2 etc. Am I correct about that?

[@lokmanlife3023]

Awesome as always. I got a question not related to this video. Its regarding the login system. Do you have a video on if the user login, will redirect to a profile page which show the logger info? if you dont, can you make a video on this topic? thank you..

[@PedroTechnologies]

Thank you! I have a video on redirecting in React, however to display users information you just have to keep the users id and pass its id through a state or a prop.

[@Pareshbpatel]

Excellent Tutorial on React Custom Hooks. I found it very useFul ;-) - Thanks, Pedro
{2022-02-14}, {2023-07-12}

[@PedroTechnologies]

Glad it was helpful!

[@kenanyildiz90]

I think you need to check response before putting img src like `response?.image` request usually takes time.

[@khandoor7228]

what would you recommend either custom hook as described here, useSWR or React Query?

[@PedroTechnologies]

I would recommend React-Query for most intermediate to hard projects. But if you are building something huge that will have thousands of lines of code, maybe creating ur custom fetcher is better cause you have more control over it!

[@eduardolopes1270]

Opa Pedro
Cara, como que tu estudou inglês? Não lembro de ter ouvido uma pronuncia tão boa e uma fala tao fluida vindo de um BR. Abraços

[@PedroTechnologies]

Boa Eduardo! Eu tive a sorte de poder estudar em uma escola internacional desde cedo, por isso tenho uma pronuncia melhor que o normal kkkkkk mas obrigado por ver os videos :) Abraços

[@JamesSmith-yj7wq]

Passing the request to useQuery is causing the axios to run the api request twice.. if you call the axios request from useQuery and only pass in the url to fetch, the api will only run once..

[@vamshikrishnareddy76]

I don't know it's just giving me a blank page. Without creating a custom hook it just wrote the same code as you and tried to run it.. it created a button when ever I click on it it doesn't change color and tried creating a custom hook now it just gives me a blank page not sure why...

[@chinthana]

Can U just extend this video.. Where we need to get two values.. {loading: true, data:{}} ====> before loading.. And after loading ==> {loading:false, data:{real data fetched }}...
If possible can U make video in future? 🙂

[@PedroTechnologies]

I can make one in the future!

[@DeepakGupta-pz4fx]

Please make on video complete hook series

[@PedroTechnologies]

Good Idea!

[@DeepakGupta-pz4fx]

Waiting please complete hook series

[@oz4549]

how can I buy you coffee? Thank you for this.

[@spondoolie6450]

click on the 'Thanks' button

[@RalfSchlindwein0]

use custom hook starts 9:45

[@teneshvignesan6227]

Not a big deal but if you ever making a tutorial, you don't have to speed rush. Try to be slower when explaining if not this is pointless in my opinion, although respect for you effort to help others.