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}
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?
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
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 ?
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?
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
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
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.
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!
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.
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 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
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
React devs, this guy is the real deal. Trust
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😁
This video changes my entire perception and understanding of custom hooks (for the better!). Great job. Thank you so much!
Awesome tutorial! Clear, concise and exhaustive. 💯
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}
you're the best man, thanks!!❤
it helps me a lot, really appreciate all of your videos, thank you
you explain it so well. loved it, thank you!
This video really helpful for me
Awesome, now I need to do it again in slow motion with a lot of extra processing :)
Very clear. Thank you.
Really quality content
Great explanation
I could learn a lot of from your videos. ❤
Nice. Must watch this later . 😊
great video. but please sync the video with the audio. this will give us pleasant experience. thanks again. learned a lot
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 ☺️
this is exactly what i need
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.
Seus vídeos são incríveis e explicativos 👏👏👏👏
Thank you
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
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
thanks you!!! (especially subtitle)
you're welcome! All my videos will have subtitles from now on :D
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?
can you please make a video about casl in react ? or virtualization in react (from scratch)
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 RUclips Short with an example. appreciate your content!
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!
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!
Hello, I'm curious why we added a refetch property name at 10:35.
Great video
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! :)
1440p. great!
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.
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!
Why to choose a network call to fetch comments instead of just setting it up ?
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.
so this is an alternative for HOC , right?
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
Do we have any code repo for this video?
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
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
why to refetch it we can show the response after adding it
I think you could've split the logic into simple separate components just as well 😅
Bro how long have you been coding for?
8 years
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"! :)
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