09 - How to write Custom Hooks in React - Build an App using Custom Hooks - Refactor React Component

👋 Learn how to write Custom Hooks in React. In this video, we will build an application with Component Architecture and then refactor it using the Custom Hooks.
The end-to-end video will provide you with a real-life use-case of how and why to use Custom Hooks. I'm sure it is going to be fun learning 😊.
🏃 All set? Let's go then...
Timecodes
0:00 - Introduction
00:32 - What Are We Building Today? Know the App.
02:14 - Build a GitHub Search using React Component Architecture.
24:23 - Result of the Last React Quiz.
26:16 - Custom Hook to Perform GitHub Search.
34:11 - Wrapping up & What's Next?
🔗 Important Links mentioned in the video:
- Source Code Used in the Project: github.com/atapas/youtube/tre...
- Learn JavaScript Sync Async and Promises: • JavaScript Sync-Async ...
- Please Reach out on Twitter: / tapasadhikary
- Showwcase ReactJS Community: www.showwcase.com/community/r...
Other Links:
- Blog: blog.greenroots.info/
- GitHub: github.com/atapas
🤝 You can support my work by following me on the above platforms and/or sponsoring me using any of these links.
- blog.greenroots.info/sponsor
- buymeacoffee.com/greenroots
- paypal.me/greenrootsinfo
Many Thanks 🙏

Пікірлер: 49

  • @ramekabalsingh3504
    @ramekabalsingh35042 ай бұрын

    nice explanation!

  • @tapasadhikary

    @tapasadhikary

    2 ай бұрын

    Glad you liked it!

  • @takshpatel2667
    @takshpatel26676 ай бұрын

    nice explanation.

  • @tapasadhikary

    @tapasadhikary

    6 ай бұрын

    Thank you 🙏

  • @web3Logic0
    @web3Logic05 ай бұрын

    Lots of love For you .😍😍

  • @tapasadhikary

    @tapasadhikary

    5 ай бұрын

    Thanks, mate ❤️

  • @Leesdjo
    @Leesdjo5 ай бұрын

    Thank you sir. Your video content is great. Love it much.

  • @tapasadhikary

    @tapasadhikary

    5 ай бұрын

    Great, glad to know you are enjoying it 😀

  • @indikaaruna4463
    @indikaaruna4463 Жыл бұрын

    Very clear explanation . Thank you for your great effort

  • @tapasadhikary

    @tapasadhikary

    Жыл бұрын

    You are most welcome ✌️

  • @letshope5646
    @letshope56466 ай бұрын

    superb explanation of custom hooks and api calls...looking forward more from you sir....Thanks much but where i can find your quiz questions?

  • @shivk2391
    @shivk23912 жыл бұрын

    Much awaited sir. I always wondered why custome hooks. Thanks for this

  • @tapasadhikary

    @tapasadhikary

    2 жыл бұрын

    Welcome Shiv 👍

  • @VishalSinghVP
    @VishalSinghVP Жыл бұрын

    I though custom hooks are complex and never attempted to understand it. But Tapas has made it easy. No complexity, no jargon - He has just made it simple. Great work.

  • @tapasadhikary

    @tapasadhikary

    Жыл бұрын

    You are right, it's a much simpler concept than how we anticipate. Thanks for your comment 👍

  • @esakkis9727

    @esakkis9727

    Жыл бұрын

    We thought it's complex and never tried. After seeing ur video, it's just simple.

  • @tapasadhikary

    @tapasadhikary

    Жыл бұрын

    It is 👍

  • @tapasadhikary

    @tapasadhikary

    Жыл бұрын

    Thank you!

  • @andrewaghoghovwia1948
    @andrewaghoghovwia1948 Жыл бұрын

    Wow this channel is a gem! Thanks sir!

  • @tapasadhikary

    @tapasadhikary

    Жыл бұрын

    Thanks a lot, Andrew 💙. Just wish more people to know about the channel 🤩

  • @farukabdullamunshi8358
    @farukabdullamunshi83582 жыл бұрын

    Great teaching...!!!

  • @tapasadhikary

    @tapasadhikary

    2 жыл бұрын

    Thank you 🙏

  • @user-yf2qv6gq1q
    @user-yf2qv6gq1q Жыл бұрын

    I think we need to create the fetchData function outside of the useEffect otherwise it will create that function every time when the useEffect runs. Explanation is simple and good thanks for the video.

  • @tapasadhikary

    @tapasadhikary

    Жыл бұрын

    Yes we can. It was for example purpose. Thanks a lot.

  • @SurendraSingh-tf7tk
    @SurendraSingh-tf7tk2 жыл бұрын

    🔥🔥🔥🔥🔥🔥 Quality

  • @tapasadhikary

    @tapasadhikary

    2 жыл бұрын

    Thanks a lot, bro 🙏

  • @rakaa31
    @rakaa312 жыл бұрын

    quality content! but upload more videos frequently otherwise its breaking the flow! anyway looking forward to another hooks

  • @tapasadhikary

    @tapasadhikary

    2 жыл бұрын

    You bet 👍

  • @jlvbcoop
    @jlvbcoop2 жыл бұрын

    Nice job. I understand that this video tries to teach how to create a custom hook and does not go any further, but I observe in it that every time the user types a letter in the search field, an API call is made. This affects performance. Are you going to indicate in future videos how to avoid this? In another hand, I don't understand what Routing out-of-the-box means. Can you give more information?

  • @tapasadhikary

    @tapasadhikary

    2 жыл бұрын

    Yes we will take care of performance in future videos. Out of the box means React library provides it by default.

  • @jaindharshan9704
    @jaindharshan9704 Жыл бұрын

    Hey Tapas, I think there is a problem during the search call, Like on all each character the api request goes on each character, sir can we optimize this ?

  • @tapasadhikary

    @tapasadhikary

    Жыл бұрын

    Hey Darshan, Thanks for calling it out. Yes, we must optimize the API calls in the real apps. In this video my focus is to explain hooks than optimizing the API calls. But, when we make it production ready, we must optimize.

  • @jaindharshan9704

    @jaindharshan9704

    Жыл бұрын

    @@tapasadhikary I mean can we optimize the number of requests

  • @jaindharshan9704

    @jaindharshan9704

    Жыл бұрын

    Can you please create the separate video on how to reduce the number of api requests on each character ?

  • @tapasadhikary

    @tapasadhikary

    Жыл бұрын

    @@jaindharshan9704 Done! I will plan it.

  • @jaindharshan9704

    @jaindharshan9704

    Жыл бұрын

    @@tapasadhikary thanks a lot bro

  • @nouchance
    @nouchance2 жыл бұрын

    ✊🔥👍

  • @tapasadhikary

    @tapasadhikary

    2 жыл бұрын

    💙💙

  • @kishoregautam1096
    @kishoregautam10962 жыл бұрын

    The syntax of useState is const [state,setState] = useState(initialization).......now my question is it mandatory to have same datatype for initialization and state

  • @tapasadhikary

    @tapasadhikary

    2 жыл бұрын

    Kishore, what do you mean by the same data type? Do you mean it has to be the same data type of the value that we set later with the one we initiated with?

  • @kishoregautam1096

    @kishoregautam1096

    2 жыл бұрын

    @@tapasadhikary Yes, you got it correct, thats my question

  • @tapasadhikary

    @tapasadhikary

    2 жыл бұрын

    @@kishoregautam1096 You can set any data type later after you initialized the state. You can play around with this concept from here: stackblitz.com/edit/react-jv6a4d One important thing to note, in the Class component, when we set the object as value, it merges, in the case of useState, it replaces.

  • @tapasadhikary

    @tapasadhikary

    2 жыл бұрын

    @@kishoregautam1096 Hope you got the answer.

  • @kishoregautam1096

    @kishoregautam1096

    2 жыл бұрын

    @@tapasadhikary Yes, thanks alot. The way you explain the concept is exceptional

  • @yasamanghassemipanah3569
    @yasamanghassemipanah3569 Жыл бұрын

    sometimes you are talking too fast! and its not easy to follow you!

  • @tapasadhikary

    @tapasadhikary

    Жыл бұрын

    Let me know on which part you felt so. As you are learning React from this video, I’m also learning to make videos 😅. We both will go pro soon. Feedback helps!

  • @yasamanghassemipanah3569

    @yasamanghassemipanah3569

    Жыл бұрын

    @@tapasadhikary I appreciate you asking; on video 08, I faced this issue, so i changed the playback speed! Besides that, the tutorials are fantastic! especially when concepts are repeated in subsequent videos...

  • @tapasadhikary

    @tapasadhikary

    Жыл бұрын

    Thanks a lot 👍

Келесі