Custom Hooks in React (Design Patterns)
Рет қаралды 30,778
Күн бұрынJoin The Discord! → discord.cosdensolutions.io
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video, we talk about Custom Hooks in React. Custom Hooks is one of the foundational concepts in modern React, ever since the introduction of Hooks in React 16.8. Custom Hooks in React allow you to extract logic in a shared hook that can be re-used across multiple components. It helps encapsulate logic in an efficient way, and helps build clean React applications that scale really well. In this video, I will show you how to apply the Custom Hooks design pattern in React.
@ericlorback4084 3 ай бұрын
These types of videos are the types of videos that I benefit from the most. Very clean and very straightforward. Thank you
@hazemgharib 3 ай бұрын
I love that you make it look so easy even for people who are not very much experienced with react.
@SaurabhMisra-yf8lf 2 ай бұрын
Awesome tutorial! Clear, concise and exhaustive. 💯
@sontranvan5348 3 ай бұрын
it helps me a lot, really appreciate all of your videos, thank you
@socaramdhani8046 3 ай бұрын
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😁
@doorey2 2 ай бұрын
Perfect tutorial. Must watch for beginner react devs
@muhammedsahad1612 23 күн бұрын
I could learn a lot of from your videos. ❤
@brNoMundo123 3 ай бұрын
Seus vídeos são incríveis e explicativos 👏👏👏👏
@mDHARYL 3 ай бұрын
Nice. Must watch this later . 😊
@arturmrozinski7536 2 ай бұрын
Awesome, now I need to do it again in slow motion with a lot of extra processing :)
@samratchandravanshi3869 3 ай бұрын
Really quality content
@a7lavinraj863 3 ай бұрын
this is exactly what i need
@akilavan2149 3 ай бұрын
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 ?
@cosdensolutions 3 ай бұрын
yes that's correct! Here I left it to keep it focused on custom hooks
@yoky0429 3 ай бұрын
thanks you!!! (especially subtitle)
@cosdensolutions 3 ай бұрын
you're welcome! All my videos will have subtitles from now on :D
@macismail2003 3 ай бұрын
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?
@cosdensolutions 3 ай бұрын
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
@macismail2003 3 ай бұрын
@@cosdensolutions I know but you mentioned in the video. That’s what I meant. Anyways thank you.
@mohamedsalimbensalem6118 3 ай бұрын
can you please make a video about casl in react ? or virtualization in react (from scratch)
@harvey_04 23 күн бұрын
Great video
@ddorabang 3 ай бұрын
1440p. great!
@aarondean1872 2 ай бұрын
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?
@cosdensolutions 2 ай бұрын
You return a function from the hook that you pass to your button to call
@aarondean1872 2 ай бұрын
thank you! itd be awsome if u made a KZfaq Short with an example. appreciate your content!
@mahadihassan5596 3 ай бұрын
Do we have any code repo for this video?
@nigeldasilvalima4568 3 ай бұрын
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
@DellmantHD 3 ай бұрын
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!
@dudutravi 2 ай бұрын
what theme are you using in vscode?
@kaluczadzsi 3 ай бұрын
Love your videos, will you create a react course with TS? I would definetly buy it!
@cosdensolutions 3 ай бұрын
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
@kaluczadzsi 3 ай бұрын
@@cosdensolutions Thanks! I am really looking forward to it! :)
@nanonkay5669 2 ай бұрын
React devs, this guy is the real deal. Trust
@joelbrighton2819 3 ай бұрын
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.
@cosdensolutions 3 ай бұрын
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
@anonysmooth648 3 ай бұрын
hi question when to use this clean up pattern? useEffect( ()=>{ var mounted = true // do logic here return () => { mounted = false } },[])
@cosdensolutions 3 ай бұрын
I never use it tbh!
@user-kb2nu8lh2t 3 ай бұрын
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
@bharadwaz2 3 ай бұрын
I humbly suggest considering a tutorial series that encompasses all the essential topics.
@cosdensolutions 3 ай бұрын
Building an entire course with that and so much more! Stay tuned ☺️
@adilmustafa1748 3 ай бұрын
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
@cosdensolutions 3 ай бұрын
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!
@ananthac6472 Ай бұрын
so this is an alternative for HOC , right?
@GigaFro 2 ай бұрын
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?
@cosdensolutions 2 ай бұрын
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
@GigaFro 2 ай бұрын
@@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!
@siddhartha-555 3 ай бұрын
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?
@cosdensolutions 3 ай бұрын
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
@UFO_808 3 ай бұрын
Bro how long have you been coding for?
@cosdensolutions 3 ай бұрын
8 years
@mladenorsolic370 3 ай бұрын
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.
@gutierrezpaulchristianl.6466 3 ай бұрын
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
@mladenorsolic370 3 ай бұрын
Why in the world would he care about vim? It's 2024, you shouldnt either
@joelbrighton2819 3 ай бұрын
@@mladenorsolic370 I think some people a just masochists: "hey look at me, I can stick pins in my eyes"! :)
@ShivaprasadBilgundi 3 ай бұрын
a video on your vs code setup
@cosdensolutions 3 ай бұрын
already done
@faizanshaikh2351 3 ай бұрын
Sir use the simple react without Typescript more people will watch, understand and grasp the code properly.
@sigilosidad 3 ай бұрын
No thank 😂
@johndevnoza4223 3 ай бұрын
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.
@jeromesnail 3 ай бұрын
It's 2024, no one should learn React without TypeScript.
@UberEverywhereSKRT 3 ай бұрын
people who say that often struggle with typescript thts why they complain
@bryson2662 3 ай бұрын
No