Custom Hooks in React (Design Patterns)

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]

These types of videos are the types of videos that I benefit from the most. Very clean and very straightforward. Thank you

[@hazemgharib]

I love that you make it look so easy even for people who are not very much experienced with react.

[@socaramdhani8046]

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😁

[@SaurabhMisra-yf8lf]

Awesome tutorial! Clear, concise and exhaustive. 💯

[@sontranvan5348]

it helps me a lot, really appreciate all of your videos, thank you

[@doorey2]

Perfect tutorial. Must watch for beginner react devs

[@mDHARYL]

Nice. Must watch this later . 😊

[@brNoMundo123]

Seus vídeos são incríveis e explicativos 👏👏👏👏

[@muhammedsahad1612]

I could learn a lot of from your videos. ❤

[@samratchandravanshi3869]

Really quality content

[@arturmrozinski7536]

Awesome, now I need to do it again in slow motion with a lot of extra processing :)

[@a7lavinraj863]

this is exactly what i need

[@akilavan2149]

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]

yes that's correct! Here I left it to keep it focused on custom hooks

[@ddorabang]

1440p. great!

[@harvey_04]

Great video

[@yoky0429]

thanks you!!! (especially subtitle)

[@cosdensolutions]

you're welcome! All my videos will have subtitles from now on :D

[@aarondean1872]

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]

You return a function from the hook that you pass to your button to call

[@aarondean1872]

thank you! itd be awsome if u made a KZbin Short with an example. appreciate your content!

[@nigeldasilvalima4568]

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

[@macismail2003]

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]

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]

@@cosdensolutions I know but you mentioned in the video. That’s what I meant. Anyways thank you.

[@mohamedsalimbensalem6118]

can you please make a video about casl in react ? or virtualization in react (from scratch)

[@nanonkay5669]

React devs, this guy is the real deal. Trust

[@joelbrighton2819]

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]

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

[@DellmantHD]

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!

[@anonysmooth648]

hi question when to use this clean up pattern? useEffect( ()=>{ var mounted = true // do logic here return () => { mounted = false } },[])

[@cosdensolutions]

I never use it tbh!

[@user-kb2nu8lh2t]

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

[@kaluczadzsi]

Love your videos, will you create a react course with TS? I would definetly buy it!

[@cosdensolutions]

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]

@@cosdensolutions Thanks! I am really looking forward to it! :)

[@adilmustafa1748]

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]

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!

[@mahadihassan5596]

Do we have any code repo for this video?

[@dudutravi]

what theme are you using in vscode?

[@ananthac6472]

so this is an alternative for HOC , right?

[@bharadwaz2]

I humbly suggest considering a tutorial series that encompasses all the essential topics.

[@cosdensolutions]

Building an entire course with that and so much more! Stay tuned ☺️

[@siddhartha-555]

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]

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

[@GigaFro]

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]

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]

@@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!

[@UFO_808]

Bro how long have you been coding for?

[@cosdensolutions]

8 years

[@gutierrezpaulchristianl.6466]

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]

Why in the world would he care about vim? It's 2024, you shouldnt either

[@joelbrighton2819]

@@mladenorsolic370 I think some people a just masochists: "hey look at me, I can stick pins in my eyes"! :)

[@mladenorsolic370]

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.

[@ShivaprasadBilgundi]

a video on your vs code setup

[@cosdensolutions]

already done

[@faizanshaikh2351]

Sir use the simple react without Typescript more people will watch, understand and grasp the code properly.

[@sigilosidad]

No thank 😂

[@johndevnoza4223]

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]

It's 2024, no one should learn React without TypeScript.

[@UberEverywhereSKRT]

people who say that often struggle with typescript thts why they complain

[@bryson2662]

No