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
nice explanation!
@tapasadhikary
2 ай бұрын
Glad you liked it!
nice explanation.
@tapasadhikary
6 ай бұрын
Thank you 🙏
Lots of love For you .😍😍
@tapasadhikary
5 ай бұрын
Thanks, mate ❤️
Thank you sir. Your video content is great. Love it much.
@tapasadhikary
5 ай бұрын
Great, glad to know you are enjoying it 😀
Very clear explanation . Thank you for your great effort
@tapasadhikary
Жыл бұрын
You are most welcome ✌️
superb explanation of custom hooks and api calls...looking forward more from you sir....Thanks much but where i can find your quiz questions?
Much awaited sir. I always wondered why custome hooks. Thanks for this
@tapasadhikary
2 жыл бұрын
Welcome Shiv 👍
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
Жыл бұрын
You are right, it's a much simpler concept than how we anticipate. Thanks for your comment 👍
@esakkis9727
Жыл бұрын
We thought it's complex and never tried. After seeing ur video, it's just simple.
@tapasadhikary
Жыл бұрын
It is 👍
@tapasadhikary
Жыл бұрын
Thank you!
Wow this channel is a gem! Thanks sir!
@tapasadhikary
Жыл бұрын
Thanks a lot, Andrew 💙. Just wish more people to know about the channel 🤩
Great teaching...!!!
@tapasadhikary
2 жыл бұрын
Thank you 🙏
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
Жыл бұрын
Yes we can. It was for example purpose. Thanks a lot.
🔥🔥🔥🔥🔥🔥 Quality
@tapasadhikary
2 жыл бұрын
Thanks a lot, bro 🙏
quality content! but upload more videos frequently otherwise its breaking the flow! anyway looking forward to another hooks
@tapasadhikary
2 жыл бұрын
You bet 👍
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
2 жыл бұрын
Yes we will take care of performance in future videos. Out of the box means React library provides it by default.
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
Жыл бұрын
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
Жыл бұрын
@@tapasadhikary I mean can we optimize the number of requests
@jaindharshan9704
Жыл бұрын
Can you please create the separate video on how to reduce the number of api requests on each character ?
@tapasadhikary
Жыл бұрын
@@jaindharshan9704 Done! I will plan it.
@jaindharshan9704
Жыл бұрын
@@tapasadhikary thanks a lot bro
✊🔥👍
@tapasadhikary
2 жыл бұрын
💙💙
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
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
2 жыл бұрын
@@tapasadhikary Yes, you got it correct, thats my question
@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
2 жыл бұрын
@@kishoregautam1096 Hope you got the answer.
@kishoregautam1096
2 жыл бұрын
@@tapasadhikary Yes, thanks alot. The way you explain the concept is exceptional
sometimes you are talking too fast! and its not easy to follow you!
@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
Жыл бұрын
@@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
Жыл бұрын
Thanks a lot 👍