Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
React Custom Hooks so clearly explained. The tutorial also helps us understand how React-Query and React-Hook-Form do their magic. Thanks, Darius. {2024-09-16}, {2024-09-23}, {2025-01-06}
Great and simple tutorial to understand Custom Hooks, thank you. Just a question though - how does it improve performance comparing to the initial code as you explained?
Hi I have watched your single responsibility principle, in that video you have mentioned a separate util to fetch the api, should the api fetching part in the useFetchComments should moved separately to achieve SRP ?
In Initial code, it was locally adding the comment, in Your refactor code you are fetching all records again. And its a good practice to do update the state locally without fetching on each comment. So how can we locally update the state using mentioned custom hooks approach, Thank you
Hey.. amazing explanations. A question came up... couldn't the handleFetchComments function be wrapped in a context function and be shared between the the page and the hook, instead of wrapping it with useCallback?
Firstly, this is incredible content! Very clear instructions. Quick question: what if you've abstracted state that needs to be updated via some sort of interaction (e.g. like a button click)? do you also pass down "setters" for the state ,or is that an anti-pattern?
I am creating a course where you build a real-world project while being guided step-by-step. It goes much more indepth than any of my videos, and it shows you how everything fits together in a real project. I will be JS but trust me, it'll still be worth it! Coming out very soon :D
Just a reminder: custom hooks do not need to have .tsx or .jsx file extensions, when they dont return any JSX code. The only thing is that they need to be called within a functional component
It's just something you wanna do on component unmount. Unsubscribing from things to prevent memory leaks is one of the most frequent use cases: removeEventListener, mutationObserver.disconnect() and such. But it could be anything really, you may want to console.log('unmounting') and this would be the place to do it
I had a discussion just yesterday about what should be contained within a custom hook. Should it only be code which includes state management / jsx or can it also include 'helper' functions (which could just be part of a non-hook helper file)? I'd be interested in hearing peoples perspectives.
Loved the video! Would it also have been reasonable to keep the comments/setComments in CommentsPage and pass comments/setComments to both useFetchComments and useAddComment?
nope, that would defeat the entire purpose of the custom hooks. If you're passing comments to useFetchComments, you also have to fetch them outside and manage that whole thing. Which puts you right where we started this video
@@cosdensolutions Apologies for my React noob-ness and I appreciate the patience in advance. But, if the point of using custom hooks is to distribute the responsibility to different hooks, then is it not reasonable to have the custom hook, useFetchComments, be responsible for fetching comments while CommentsPage can be responsible for maintaining the data structure (comments) that will be shared between its two custom hooks? Also, why would I need to fetch them outside of the useFetchComments if I passed the setComment function handler as input to the custom hook? Maybe I am misunderstanding the definition of a "hook" in React. Thanks!
I prefer writing my custom hook code in my component file as it is better organized and easily maintainable. Is there any downside to this approach in the long run?
custom hooks are meant to be shared and re-usable, so they shouldn't go in any component file, but inside of the hooks folder so any component can use them
When you say custom hooks have to be prefixed with use, just for clarity, its just a best practice, react doesnt impose this nor it would treat a hook function any different if it wasnt prefixed with use.
The last example adds an unnecessary network request (fetch comments) after the comment is added on the server instead of just updating the state. I am saying unnecessary since if you didn't have to use the refetch function, you would simply update the state when you receive the added comment as the response. Network requests are expensive so I would argue this is not the best practice.
Trust me he knows what is he doing. While ago i had same thoughts but not anynore. Learn the very basics of ts. U have to learn it anyway , early or late.
Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
These types of videos are the types of videos that I benefit from the most. Very clean and very straightforward. Thank you
I love that you make it look so easy even for people who are not very much experienced with react.
Perfect tutorial. Must watch for beginner react devs
very nice clear precise and effective video, every time ads come i will never skip the ads i'll try to help people like you as best as i can😁
Awesome tutorial! Clear, concise and exhaustive. 💯
it helps me a lot, really appreciate all of your videos, thank you
This video changes my entire perception and understanding of custom hooks (for the better!). Great job. Thank you so much!
Amazing video. Tutorials must be like this, detailed and crisp.
Great video !! 🙏
you explain it so well. loved it, thank you!
Awesome, now I need to do it again in slow motion with a lot of extra processing :)
you're the best man, thanks!!❤
React devs, this guy is the real deal. Trust
React Custom Hooks so clearly explained. The tutorial also helps us understand how React-Query and React-Hook-Form do their magic. Thanks, Darius.
{2024-09-16}, {2024-09-23}, {2025-01-06}
This video really helpful for me
Very clear. Thank you.
I could learn a lot of from your videos. ❤
Nice. Must watch this later . 😊
04:25 Consuming custom hook
05:33 Creating custom hook
Really quality content
Great and simple tutorial to understand Custom Hooks, thank you. Just a question though - how does it improve performance comparing to the initial code as you explained?
It doesn't, in both cases the performance is the same. However the code is much cleaner and organized! It's not always about performance
@@cosdensolutions I know but you mentioned in the video. That’s what I meant. Anyways thank you.
Great explanation
Seus vídeos são incríveis e explicativos 👏👏👏👏
Hi I have watched your single responsibility principle, in that video you have mentioned a separate util to fetch the api, should the api fetching part in the useFetchComments should moved separately to achieve SRP ?
yes that's correct! Here I left it to keep it focused on custom hooks
Hello, I'm curious why we added a refetch property name at 10:35.
It's representing the handleFetchComments function
I humbly suggest considering a tutorial series that encompasses all the essential topics.
Building an entire course with that and so much more! Stay tuned ☺️
can you please make a video about casl in react ? or virtualization in react (from scratch)
In Initial code, it was locally adding the comment, in Your refactor code you are fetching all records again. And its a good practice to do update the state locally without fetching on each comment. So how can we locally update the state using mentioned custom hooks approach,
Thank you
yes it was, in that case you'd need to pass the function to set the comments instead of a refetch function. The rest would work the same!
What would be the difference between useHook e useContext? Setting up they're very different, but function-wise they seem very similar
Hey.. amazing explanations. A question came up... couldn't the handleFetchComments function be wrapped in a context function and be shared between the the page and the hook, instead of wrapping it with useCallback?
this is exactly what i need
Firstly, this is incredible content! Very clear instructions. Quick question: what if you've abstracted state that needs to be updated via some sort of interaction (e.g. like a button click)? do you also pass down "setters" for the state ,or is that an anti-pattern?
You return a function from the hook that you pass to your button to call
thank you! itd be awsome if u made a TH-cam Short with an example. appreciate your content!
Love your videos, will you create a react course with TS? I would definetly buy it!
I am creating a course where you build a real-world project while being guided step-by-step. It goes much more indepth than any of my videos, and it shows you how everything fits together in a real project. I will be JS but trust me, it'll still be worth it! Coming out very soon :D
@@cosdensolutions Thanks! I am really looking forward to it! :)
Can you make a video guide for Vim in vs code. how to do add it and set it up. Would be very usefull. Thanks!
Just a reminder: custom hooks do not need to have .tsx or .jsx file extensions, when they dont return any JSX code.
The only thing is that they need to be called within a functional component
thanks you!!! (especially subtitle)
you're welcome! All my videos will have subtitles from now on :D
Why to choose a network call to fetch comments instead of just setting it up ?
hi question when to use this clean up pattern?
useEffect( ()=>{
var mounted = true
// do logic here
return () => { mounted = false }
},[])
I never use it tbh!
It's just something you wanna do on component unmount. Unsubscribing from things to prevent memory leaks is one of the most frequent use cases: removeEventListener, mutationObserver.disconnect() and such. But it could be anything really, you may want to console.log('unmounting') and this would be the place to do it
I had a discussion just yesterday about what should be contained within a custom hook. Should it only be code which includes state management / jsx or can it also include 'helper' functions (which could just be part of a non-hook helper file)? I'd be interested in hearing peoples perspectives.
I would put the helper functions in another file usually. Unless they are specifically used for the custom hook and only for that custom hook
Loved the video! Would it also have been reasonable to keep the comments/setComments in CommentsPage and pass comments/setComments to both useFetchComments and useAddComment?
nope, that would defeat the entire purpose of the custom hooks. If you're passing comments to useFetchComments, you also have to fetch them outside and manage that whole thing. Which puts you right where we started this video
@@cosdensolutions Apologies for my React noob-ness and I appreciate the patience in advance. But, if the point of using custom hooks is to distribute the responsibility to different hooks, then is it not reasonable to have the custom hook, useFetchComments, be responsible for fetching comments while CommentsPage can be responsible for maintaining the data structure (comments) that will be shared between its two custom hooks? Also, why would I need to fetch them outside of the useFetchComments if I passed the setComment function handler as input to the custom hook? Maybe I am misunderstanding the definition of a "hook" in React. Thanks!
Do we have any code repo for this video?
so this is an alternative for HOC , right?
Thank you
Bro how long have you been coding for?
8 years
why to refetch it we can show the response after adding it
Great video
what theme are you using in vscode?
I prefer writing my custom hook code in my component file as it is better organized and easily maintainable. Is there any downside to this approach in the long run?
custom hooks are meant to be shared and re-usable, so they shouldn't go in any component file, but inside of the hooks folder so any component can use them
sometimes subtitles dont work or can not get in time
1440p. great!
When you say custom hooks have to be prefixed with use, just for clarity, its just a best practice, react doesnt impose this nor it would treat a hook function any different if it wasnt prefixed with use.
i know this is not react related but, can u do a tutorial on neovim or vim or just the vim motion in your vscode
Why in the world would he care about vim? It's 2024, you shouldnt either
@@mladenorsolic370 I think some people a just masochists: "hey look at me, I can stick pins in my eyes"! :)
The last example adds an unnecessary network request (fetch comments) after the comment is added on the server instead of just updating the state. I am saying unnecessary since if you didn't have to use the refetch function, you would simply update the state when you receive the added comment as the response. Network requests are expensive so I would argue this is not the best practice.
I think you could've split the logic into simple separate components just as well 😅
great video. but please sync the video with the audio. this will give us pleasant experience. thanks again. learned a lot
a video on your vs code setup
already done
Sir use the simple react without Typescript more people will watch, understand and grasp the code properly.
No thank 😂
Trust me he knows what is he doing. While ago i had same thoughts but not anynore. Learn the very basics of ts. U have to learn it anyway , early or late.
It's 2024, no one should learn React without TypeScript.
people who say that often struggle with typescript thts why they complain
No