ALL React Hooks Explained in 12 Minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ธ.ค. 2024

ความคิดเห็น •

  • @anjul6015
    @anjul6015 8 หลายเดือนก่อน +35

    the amount of information in one video is mind bogg!!

  • @suryanshpatel4750
    @suryanshpatel4750 8 หลายเดือนก่อน +16

    the joke about useId is quite hilarious, i was thinking same :)

  • @alena_3001
    @alena_3001 16 วันที่ผ่านมา

    Thank you very much for your perfect pronunciation. I'm non-native english speaker so sometimes it is a problem to understand other people. But you speak very clearly, so I understood everything! & it was very helpful for me, small tips how to work with all of these hooks and when you should use another one also great!

  • @coderkrishna8990
    @coderkrishna8990 3 หลายเดือนก่อน

    🪄✨ Made with SummarizeYT
    0:00 - Introduction to React hooks and their importance in building React apps.
    0:18 - Overview of the eight major categories of React hooks.
    1:04 - Explanation of `useState` as a fundamental hook for managing component state.
    2:16 - Introduction to `useReducer` for complex state management.
    3:20 - Discussion on `useSyncExternalStore` and its limited use case.
    3:38 - Definition of effect hooks and their role in performing side effects.
    4:52 - When to use `useEffect` for synchronizing React code with browser APIs.
    5:08 - Explanation of `useLayoutEffect` and its timing in the rendering process.
    5:49 - Introduction to `useInsertionEffect` for CSS-in-JS library developers.
    6:05 - Effect hooks can read from the layout, like effects refs.
    6:15 - The `useRef` hook allows remembering data without triggering a render.
    6:39 - Refs are mutable, while state is immutable, allowing direct modification.
    7:00 - Use imperative handle to forward refs and expose methods to parent components.
    7:42 - `useMemo` caches previous results to improve performance for expensive computations.
    8:25 - `useCallback` prevents callback functions from being recreated on each render.
    9:01 - `useContext` reads context values from a context provider.
    9:26 - `useTransition` marks certain state updates as non-urgent for better responsiveness.
    10:18 - `useDeferredValue` schedules updates at optimal times for improved user experience.
    11:15 - `useId` creates unique IDs for form inputs, ensuring no conflicts.

  • @thiagoneres8178
    @thiagoneres8178 8 หลายเดือนก่อน +9

    You ARE a legend, mate. That was quite helpful for me

  • @Niggeshwar69
    @Niggeshwar69 8 หลายเดือนก่อน +33

    Although it does not teach everything you need to know but it teaches everything you shouldn't be scared of

  • @RAHULE-sy4sj
    @RAHULE-sy4sj 9 วันที่ผ่านมา

    Million dollar Video to fresh Up !!!! Thanks For This !! And you earned a Subscriber

  • @markanthonypandac2469
    @markanthonypandac2469 8 หลายเดือนก่อน +7

    in useId you definitely knew what i was thinking🤣🤣🤣

  • @thineshkumar1389
    @thineshkumar1389 4 หลายเดือนก่อน +2

    You video seems to give off some cozy vibes with those graphics and sounds. Makes me feel like coding in summer camp ⛺🌄

    • @onlyAI..
      @onlyAI.. 2 หลายเดือนก่อน

      True

  • @faizanqureshi3792
    @faizanqureshi3792 6 หลายเดือนก่อน +3

    please explain Redux too like this, really loved your content

  • @datokhojava6421
    @datokhojava6421 4 หลายเดือนก่อน +1

    2:58 I think its a error on the screen. switch cases name and dispatch type isn't same I think this code will not work. Am i right ?

  • @not_a_human_being
    @not_a_human_being 3 หลายเดือนก่อน

    good stuff! can't wait for React 19!

  • @EasyWash-mv3bf
    @EasyWash-mv3bf 6 หลายเดือนก่อน +1

    Very good and clear explanation 👏

  • @rjwhite4424
    @rjwhite4424 8 หลายเดือนก่อน +13

    Most programs will only use 3-4 of these hooks

    • @VuDangQuangFPLHCM
      @VuDangQuangFPLHCM 3 หลายเดือนก่อน +1

      could you please help me know what they are? thank you

    • @incandesc3nce
      @incandesc3nce 3 หลายเดือนก่อน

      @@VuDangQuangFPLHCMuseState, useEffect, useContext, useRef, sometimes you're most likely to use useReducer and useMemo as they're are more specific

    • @rjwhite4424
      @rjwhite4424 3 หลายเดือนก่อน

      @@VuDangQuangFPLHCM you could build alot of apps using just useState, useEffect, useContext, and useRef. Once you hit enterprise level you might start using more but those are the basic ones

    • @incandesc3nce
      @incandesc3nce 3 หลายเดือนก่อน

      @@VuDangQuangFPLHCM useState, useEffect, useRef and useContext

    • @bartekdurczak4085
      @bartekdurczak4085 หลายเดือนก่อน

      @@VuDangQuangFPLHCM useState useMemo useCallback useEffect useRef are the most important for me then comes things like useDeferedValue

  • @mugesoft
    @mugesoft 5 หลายเดือนก่อน

    Thanks for your wonderful explanation!

  • @leelacreations
    @leelacreations 8 หลายเดือนก่อน +2

    Could you please create a video on JavaScript Data Structures and Algorithms

  • @breezycodes
    @breezycodes 2 หลายเดือนก่อน

    ok. Can you please share what you use to do presentation?
    Thanks for the visuals. Really nice

  • @sike_val
    @sike_val 8 หลายเดือนก่อน +2

    could you make a tutorial about redux?

  • @shaikyasmeen3947
    @shaikyasmeen3947 5 หลายเดือนก่อน +1

    Simply superb

  • @senakr
    @senakr 11 วันที่ผ่านมา

    Nice animation. What is the name of this software?

  • @JTMoonXX30
    @JTMoonXX30 2 หลายเดือนก่อน

    what did you use to make your illustrations?

  • @spiritualconsciousness475
    @spiritualconsciousness475 6 หลายเดือนก่อน

    Really like your content, It was so helpful, Can you please upload video regarding redux and life cycle

  • @KanchanaW
    @KanchanaW หลายเดือนก่อน

    great video very informative.

  • @sumanthachark
    @sumanthachark หลายเดือนก่อน

    Can anybody share your experience of his bootcamp!?

  • @Techie_Sridhar
    @Techie_Sridhar 8 หลายเดือนก่อน

    Since you can explain this so well, can you explain about using async function in context? 🙏

  • @432aniketkadam4
    @432aniketkadam4 8 หลายเดือนก่อน

    Great content , make some videos on JavaScript

  • @soldishero_YY
    @soldishero_YY 7 หลายเดือนก่อน

    Nice video. Informative and entartained.

  • @shaikyasmeen3947
    @shaikyasmeen3947 5 หลายเดือนก่อน +1

    Please make video on redux and toolkit

  • @bharatlondhe9995
    @bharatlondhe9995 5 หลายเดือนก่อน

    Besstttt❤❤❤

  • @MisterBlat
    @MisterBlat 8 หลายเดือนก่อน

    good videos bud

  • @webhero42
    @webhero42 7 หลายเดือนก่อน

    2:12 prev + 1

  • @fresonn
    @fresonn 8 หลายเดือนก่อน

    Good, wonderful

  • @onlyAI..
    @onlyAI.. 2 หลายเดือนก่อน

    Please make video on redux too

  • @manju271989
    @manju271989 8 หลายเดือนก่อน +1

    Nice one.

  • @larrasket
    @larrasket 4 หลายเดือนก่อน

    1:23 opensuse

  • @Aziz0.
    @Aziz0. 3 หลายเดือนก่อน

    11.25 nice one 😂😂

  • @saivutukuri-o3d
    @saivutukuri-o3d 7 หลายเดือนก่อน

    Please moste more videos

  • @TokyoXtreme
    @TokyoXtreme 8 หลายเดือนก่อน

    Accurate.

  • @prashlovessamosa
    @prashlovessamosa 8 หลายเดือนก่อน

    great

  • @VoiceHole
    @VoiceHole 8 หลายเดือนก่อน

    Dope!

  • @JohnSmith-op7ls
    @JohnSmith-op7ls 6 หลายเดือนก่อน

    So, against all better judgment and options, you decided to use react. Enjoy the pain.

  • @DoctorMandible
    @DoctorMandible 8 หลายเดือนก่อน +76

    Which hook uninstalls react and installs svelte 😂

    • @josygeorge5671
      @josygeorge5671 8 หลายเดือนก่อน +8

      😅 but why?

    • @thedavistheory7674
      @thedavistheory7674 8 หลายเดือนก่อน +29

      Skill issue

    • @dotarjun
      @dotarjun 8 หลายเดือนก่อน

      useSvelte

    • @vvelarm
      @vvelarm 8 หลายเดือนก่อน

      ​@@thedavistheory7674dude...

    • @andrewguasch8374
      @andrewguasch8374 8 หลายเดือนก่อน +1

      Ctrl + Alt + Delete
      Then Restart

  • @dipalibadgujar2100
    @dipalibadgujar2100 14 วันที่ผ่านมา

    Please put more ads and ads ands more and more

  • @agilidadmental848
    @agilidadmental848 6 หลายเดือนก่อน

    Too much adds for a 12 min video. Let me call it the hunger games… 💩