Custom Hooks in React - Every React Developer Should Know This

👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Web development roadmap 2024 & 2025: email.bytegrad.com
👉 Email newsletter (BIG update soon): email.bytegrad.com
👉 Discord: all my courses have a private Discord where I actively participate
⏱️ Timestamps:
0:00 Overview
0:48 Pattern 1 (Components)
2:47 Pattern 2 (Utility function)
6:17 Pattern 3 (Custom hook)
15:20 Rules of custom hooks
16:13 Return array vs object
18:57 Custom hook benefits
20:16 Typescript generics
26:43 Other custom hooks
#webdevelopment #programming #coding #reactjs #nextjs

[@ByteGrad]

My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.

[@mhsanto6495]

I don’t know why, but this teacher is the only one on UA-cam whom I can listen to and watch all day without getting distracted. I sincerely hope he continue make more videos regularly.

[@ByteGrad]

Thanks, appreciate it! More to come!

[@mhsanto6495]

😍🥰@@ByteGrad

[@dMDzn]

Your mention of TS generics at the end was the cherry on top - a perfect use case that a lot of beginners will actually come across. Good job!

[@cbunn81]

I know the point was to make something in JavaScript, but it is possible to captalize only the first letter of the first word in a string using only CSS. You just have to use the *::first-letter* pseudo element along with the *text-transform* property. For example, to make the first letter of every *li* element capitalized:
li::first-letter {
text-transform: capitalize;
}

[@Osirisdigitalagency]

I was just about to say that

[@MuhammadUmair-gy5le]

Thanks ByteGrad. Your content is really helpfull for me 👍

[@seagull2345]

Perfect timing. Im just starting to learn about custom hooks and when and where to use them. Thank you for this great explanation!

[@abhijeetkumar8044]

Everytime i learn a lot from you videos on react core concepts. Thanks @ByteGrad for the react core concepts videos. Please make more on performance improvements🙏

[@real23lions]

Your storytelling and editing is really good here. Glad you improved over the years because your content has always been great. Now the content delivery is 💯 .

[@irfantayyib]

Keep it up sir! Always needed a teacher like you.

[@mjylove2]

this is a masterpiece

[@neelimaneelu195]

Honestly an amazing video

[@user-ru8hn9hb5c]

Will watch this during dinner!

[@brailegawigawen]

i came upon some of your videos just now, subscribed and immediately purchased your courses. *also, thanks for the discounts. highly appreciated!

[@ByteGrad]

Amazing, welcome to the courses and enjoy! :)

[@darkcss1054]

I'd love a video on zustand as I am struggling to understand how am I supposed to transfer state from component to page and vice versa.

[@goatslayer5957]

Cool ztuff!

[@demicoderr]

Wow, just wow.

[@jacquelynecarmen]

More videos like this ❤

[@dayank.8499]

thank you for this video, but I don't know if we can apply this method with the selected items from detail List

[@bryson2662]

You could've passed the generic parameter to the usestate function and you would get better typing without needing to type the return function in the last example

[@mohammednasser2159]

You could've passed the generic type to the useState type parameter to simplify things

[@drprdcts]

Or cast the return value `as const`

[@PrMovies0]

Really Really helpful thanks ❤️

[@0xtz_]

👀 amazing

[@p1erceprc]

which vscode theme is this? thx

[@saajanbajaj641]

What If, I want to store multiple value in same file then have to init custom hook everytime?

[@isaacjon]

hey bro, i want to try an offline frontend course from sourceryacademy in lithuania. After the course they are wiling to give job offer for best students. But i need some financial help to live there during this course( 3 month) because i am not european and not living near lithuania.

[@bryson2662]

You can capitalize the first letter using just css by the way. First-letter and transform uppercase

[@mrBurlaka1]

custom hooks don't have to use react base hooks

[@aadamishmael8549]

They don’t have to but should.

[@complikatd]

Thanks for fixing your mic

[@CHUCKYCHUCKYBOBUCY]

This, as well as the previous video of yours that I just finished (12 react hooks mistakes), are the best how to/general learning videos I've ever come across on any topic.

[@ByteGrad]

Great to hear, enjoy!