Custom Hooks in React (Design Patterns)

[@cosdensolutions]

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

[@ericlorback4084]

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

[@doorey2]

Perfect tutorial. Must watch for beginner react devs

[@hazemgharib]

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

[@nanonkay5669]

React devs, this guy is the real deal. Trust

[@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😁

[@dganiteg]

This video changes my entire perception and understanding of custom hooks (for the better!). Great job. Thank you so much!

[@Pareshbpatel]

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}

[@arturmrozinski7536]

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

[@SaurabhMisra-yf8lf]

Awesome tutorial! Clear, concise and exhaustive. 💯

[@sontranvan5348]

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

[@dingus1720]

you explain it so well. loved it, thank you!

[@jitujahagirdar613]

This video really helpful for me

[@samratchandravanshi3869]

Really quality content

[@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 ☺️

[@mDHARYL]

Nice. Must watch this later . 😊

[@clasesutnfrc8699]

04:25 Consuming custom hook 05:33 Creating custom hook

[@HamedAthari]

you're the best man, thanks!!❤

[@jovannijungco1761]

Very clear. Thank you.

[@a7lavinraj863]

this is exactly what i need

[@muhammedsahad1612]

I could learn a lot of from your videos. ❤

[@tanvirakon9104]

great video. but please sync the video with the audio. this will give us pleasant experience. thanks again. learned a lot

[@itmecube]

Great explanation

[@brNoMundo123]

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

[@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.

[@GHSB7462]

Thank you

[@harvey_04]

Great video

[@ddorabang]

1440p. great!

[@yoky0429]

thanks you!!! (especially subtitle)

[@cosdensolutions]

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

[@zerosandones7547]

Hello, I'm curious why we added a refetch property name at 10:35.

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

[@mohamedsalimbensalem6118]

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

[@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! :)

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

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

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

[@hellobrunao]

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?

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

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

[@srdjancoric2879]

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.

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

[@АндрейВоронов-ф2б]

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

[@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.

[@dudutravi]

what theme are you using in vscode?

[@mahadihassan5596]

Do we have any code repo for this video?

[@Ram-ku7me]

Why to choose a network call to fetch comments instead of just setting it up ?

[@ananthac6472]

so this is an alternative for HOC , right?

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

[@powerofpavan7710]

why to refetch it we can show the response after adding it

[@randompointlessness2766]

I think you could've split the logic into simple separate components just as well 😅

[@meylis_so2]

sometimes subtitles dont work or can not get in time

[@UFO_808]

Bro how long have you been coding for?

[@cosdensolutions]

8 years

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

[@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"! :)

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