KZhead

Custom Hooks in React - Every React Developer Should Know This

ByteGrad
2024 ж. 24 Мам.
33 369 Рет қаралды
Жүктеу

👉 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

Пікірлер

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

    @ByteGrad@ByteGrad3 ай бұрын

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

    @seventyMinus1@seventyMinus13 ай бұрын

    • Thanks, appreciate it! More to come!

      @ByteGrad@ByteGrad3 ай бұрын

    • 😍🥰@@ByteGrad

      @seventyMinus1@seventyMinus13 ай бұрын

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

    @dMDzn@dMDzn3 ай бұрын

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

    @seagull2345@seagull23453 ай бұрын

  • 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; }

    @cbunn81@cbunn813 ай бұрын

    • I was just about to say that

      @Osirisdigitalagency@Osirisdigitalagency2 ай бұрын

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

    @irfantayyib@irfantayyibАй бұрын

  • 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🙏

    @abhijeetkumar8044@abhijeetkumar80443 ай бұрын

  • Thanks ByteGrad. Your content is really helpfull for me 👍

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

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

    @real23lions@real23lions3 ай бұрын

  • Honestly an amazing video

    @neelimaneelu195@neelimaneelu1952 ай бұрын

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

    @brailegawigawen@brailegawigawen3 ай бұрын

    • Amazing, welcome to the courses and enjoy! :)

      @ByteGrad@ByteGrad3 ай бұрын

  • this is a masterpiece

    @mjylove2@mjylove2Ай бұрын

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

    @darkcss1054@darkcss1054Ай бұрын

  • Will watch this during dinner!

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

  • Cool ztuff!

    @goatslayer5957@goatslayer59572 ай бұрын

  • Really Really helpful thanks ❤️

    @PrMovies0@PrMovies03 ай бұрын

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

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

  • More videos like this ❤

    @jacquelynecarmen@jacquelynecarmen3 ай бұрын

  • Wow, just wow.

    @demicoderr@demicoderr3 ай бұрын

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

    @mohammednasser2159@mohammednasser21593 ай бұрын

    • Or cast the return value `as const`

      @drprdcts@drprdcts3 ай бұрын

  • 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

    @bryson2662@bryson26623 ай бұрын

  • 👀 amazing

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

  • which vscode theme is this? thx

    @p1erceprc@p1erceprc3 ай бұрын

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

    @saajanbajaj641@saajanbajaj641Ай бұрын

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

    @isaacjon@isaacjon3 ай бұрын

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

    @bryson2662@bryson26623 ай бұрын

  • Thanks for fixing your mic

    @complikatd@complikatd3 ай бұрын

  • custom hooks don't have to use react base hooks

    @mrBurlaka1@mrBurlaka13 ай бұрын

    • They don’t have to but should.

      @aadamishmael8549@aadamishmael85492 ай бұрын

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

    @CHUCKYCHUCKYBOBUCY@CHUCKYCHUCKYBOBUCY2 ай бұрын

    • Great to hear, enjoy!

      @ByteGrad@ByteGrad2 ай бұрын
KZhead