5 REACT CUSTOM HOOKS You Should Start Using (Explained)
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- In this video, we gonna cover the 5 custom hooks that I use every single day in most of my React applications and that you should also use. 🎣 ⚛
Those 5 React hooks will boost your productivity, speed up your development process, and save you a lot of time so you can work on more valuable features for your product or application.
Let's go! 🚀 🔥
Github: github.com/AlterClassIO/react...
00:00 Introduction
01:01 React Hooks
02:10 useFetch
05:38 useEventListener
07:33 useLocalStorage
09:09 useMediaQuery
10:47 useDarkMode
11:57 Thank you 🙏
---
[COURSE]
Visit AlterClass.io if you want to get the skills employers are looking for and become a React developer 👉 alterclass.io/courses/react.
Our Course:
📚 8 Self-Paced Modules
⚛️ 8 Real-world projects
📄 Complete Portfolio
👨👨👦👦 An Amazing Community
👨🏫 World-class Instructor
💯 1-on-1 Code Review and Expert Feedback
♾️ Lifetime Access
AlterClass is disrupting the way you learn React.
Our next-generation platform will give you the confidence and skills to land your dream job 👨💻.
Everything you need to master React.
💯 Join 'Become a React Developer' 30-Day Money-Back Guarantee now 👇 www.alterclass.io/courses/react
---
AlterClass on Social Media:
/ discord
/ alterclassio
/ alterclass.io / alterclass / alterclass
![[안방1열 풀캠4K] 베이비몬스터 'FOREVER' (BABYMONSTER FullCam)│@SBS Inkigayo 240707](http://i.ytimg.com/vi/_2HL-ogzzBU/mqdefault.jpg)
⚛️ Check out my React JS course here 👉 www.alterclass.io/courses/react
You must be God. No one, absolutely no one has explained custom hooks as gracefully as you.
This is simply brilliant. Definitely deserves more views than it has!
WOW! Simply WOW! You are my favorite TH-camr now. Simple and concise. Subscribed!
Your programming and explanation is so good.
Can you make a video on side effects and memory leak?
This video is gold, thanks for sharing.
Amazing need more such videos which demonstrate practical knowledge.Thanks.
Wow! these hooks were very helpful for my project. :D
Your explanations are top notch, I subscribed!
This video is very underrated. Great job 👍
This was useful ty
awesome! I subbed
Great examples; concise and ample detail as well. Great work! Sadly they are not written in TypeScript.
For the useEventListener hook, can you use also useCallback to wrap the listener there?
Hey brother loved your videos .... I have few questions hope you will answer Ques.1 How Client side rendering ,server side rendering and static side generation different from each other ? Ques.2 What Static side generation exactly mean ? Ques.3 What happens when react project initally runs? Thanks a lot
Hey Ashish! Thanks for your kind words. Check out my video about Gatsby and NextJS. It may help you with those concepts: th-cam.com/video/c8_kEVCcQvg/w-d-xo.html. And feel free to join my Discord channel (if not already) to get help from the AlterClass community: discord.gg/HTQvwxA
Is it correct to use the data as it is originally received from the API? Shouldn't be transformed to separate the API model from our project?
(I apologize for my English as it is probably not clear enough)
Why do you put url and options in the dependency array? Should we just leave it empty?
Btw, I love your videos! Please continue making them.
I love the useFetch hooks.
But can you show me how to use it for a post request for login or sign up which will run only when the user presses login
This hook is actually designed to only fetch data through a GET request. If you'd like to do a POST request when the user clicks a button, you could do it by invoking an event handler from the onClick event.
I Greg, I appreciate your video, but I have some issue with your code at the useMediaQuery Hook:
I have the following errors:
line 4: 'q' is not defined and 'matches()' is not a function
Can you explain me how to progress and fix these errors? thank you for your help!
Same problem 😥
The issue has been fixed in the repository. Check it out again here: github.com/AlterClassIO/react-custom-hooks/blob/master/src/useMediaQuery.js
If I pass options as an Object, the useFetch hook leads to Infinite Loop, how to avoid that?
I hope you've already solved your problem. For others having the same problem, if you are sending objects into the dependency of useEffect, an object is not equal to another object and so your useEffect renders again... if you need to use object as dependency, you can simply use JSON.stringify(object) so that text based comparison will be ok.
You can memoized your options object either by defining it outside your components, or by using the useMemo hook.
Could you explain what does data?.hits?.map stands for? I mean the '?' between the '.'
optional chaining, it means: look if data is not undefined, if it is defined, look if data.hits is defined, if it is look for data.hits.map.
this way you never get breaking errors like data.hits is undefined and handle errors gracefully
@@johannsebastianbach3411 Thank you, sir. I got it.
Start video: 3:00
too confusing