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). Add auth to your React app fast: bit.ly/3QOe1Bh
👉 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

Пікірлер: 38

  • @ByteGrad
    @ByteGrad3 ай бұрын

    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.

  • @seventyMinus1
    @seventyMinus13 ай бұрын

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

  • @ByteGrad

    @ByteGrad

    3 ай бұрын

    Thanks, appreciate it! More to come!

  • @seventyMinus1

    @seventyMinus1

    3 ай бұрын

    😍🥰@@ByteGrad

  • @dMDzn
    @dMDzn3 ай бұрын

    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
    @cbunn813 ай бұрын

    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

    @Osirisdigitalagency

    2 ай бұрын

    I was just about to say that

  • @irfantayyib
    @irfantayyib2 ай бұрын

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

  • @abhijeetkumar8044
    @abhijeetkumar80443 ай бұрын

    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🙏

  • @seagull2345
    @seagull23453 ай бұрын

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

  • @MuhammadUmair-gy5le
    @MuhammadUmair-gy5le3 ай бұрын

    Thanks ByteGrad. Your content is really helpfull for me 👍

  • @real23lions
    @real23lions3 ай бұрын

    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 💯 .

  • @neelimaneelu195
    @neelimaneelu1952 ай бұрын

    Honestly an amazing video

  • @mjylove2
    @mjylove2Ай бұрын

    this is a masterpiece

  • @darkcss1054
    @darkcss10542 ай бұрын

    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.

  • @brailegawigawen
    @brailegawigawen3 ай бұрын

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

  • @ByteGrad

    @ByteGrad

    3 ай бұрын

    Amazing, welcome to the courses and enjoy! :)

  • @user-ru8hn9hb5c
    @user-ru8hn9hb5c3 ай бұрын

    Will watch this during dinner!

  • @mohammednasser2159
    @mohammednasser21593 ай бұрын

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

  • @drprdcts

    @drprdcts

    3 ай бұрын

    Or cast the return value `as const`

  • @dayank.8499
    @dayank.84993 ай бұрын

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

  • @CHUCKYCHUCKYBOBUCY
    @CHUCKYCHUCKYBOBUCY2 ай бұрын

    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

    @ByteGrad

    2 ай бұрын

    Great to hear, enjoy!

  • @bryson2662
    @bryson26623 ай бұрын

    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

  • @goatslayer5957
    @goatslayer59572 ай бұрын

    Cool ztuff!

  • @p1erceprc
    @p1erceprc3 ай бұрын

    which vscode theme is this? thx

  • @demicoderr
    @demicoderr3 ай бұрын

    Wow, just wow.

  • @jacquelynecarmen
    @jacquelynecarmen3 ай бұрын

    More videos like this ❤

  • @saajanbajaj641
    @saajanbajaj641Ай бұрын

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

  • @PrMovies0
    @PrMovies03 ай бұрын

    Really Really helpful thanks ❤️

  • @isaacjon
    @isaacjon3 ай бұрын

    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.

  • @0xtz_
    @0xtz_3 ай бұрын

    👀 amazing

  • @bryson2662
    @bryson26623 ай бұрын

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

  • @mrBurlaka1
    @mrBurlaka13 ай бұрын

    custom hooks don't have to use react base hooks

  • @aadamishmael8549

    @aadamishmael8549

    3 ай бұрын

    They don’t have to but should.

  • @complikatd
    @complikatd3 ай бұрын

    Thanks for fixing your mic