ALL React Hooks Explained in 12 Minutes

Поделиться
HTML-код
  • Опубликовано: 20 ноя 2024

Комментарии • 58

  • @anjul6015
    @anjul6015 7 месяцев назад +33

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

  • @Niggeshwar69
    @Niggeshwar69 7 месяцев назад +33

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

  • @suryanshpatel4750
    @suryanshpatel4750 6 месяцев назад +14

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

  • @thineshkumar1389
    @thineshkumar1389 3 месяца назад +2

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

  • @thiagoneres8178
    @thiagoneres8178 7 месяцев назад +9

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

  • @markanthonypandac2469
    @markanthonypandac2469 7 месяцев назад +6

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

  • @faizanqureshi3792
    @faizanqureshi3792 5 месяцев назад +3

    please explain Redux too like this, really loved your content

  • @coderkrishna8990
    @coderkrishna8990 2 месяца назад

    🪄✨ 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.

  • @not_a_human_being
    @not_a_human_being 2 месяца назад

    good stuff! can't wait for React 19!

  • @mugesoft
    @mugesoft 4 месяца назад

    Thanks for your wonderful explanation!

  • @rjwhite4424
    @rjwhite4424 7 месяцев назад +13

    Most programs will only use 3-4 of these hooks

    • @VuDangQuangFPLHCM
      @VuDangQuangFPLHCM 2 месяца назад +1

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

    • @incandesc3nce
      @incandesc3nce 2 месяца назад

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

    • @rjwhite4424
      @rjwhite4424 2 месяца назад

      @@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 2 месяца назад

      @@VuDangQuangFPLHCM useState, useEffect, useRef and useContext

    • @bartekdurczak4085
      @bartekdurczak4085 5 дней назад

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

  • @EasyWash-mv3bf
    @EasyWash-mv3bf 5 месяцев назад +1

    Very good and clear explanation 👏

  • @shaikyasmeen3947
    @shaikyasmeen3947 4 месяца назад +1

    Simply superb

  • @KanchanaW
    @KanchanaW 11 дней назад

    great video very informative.

  • @breezycodes
    @breezycodes Месяц назад

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

  • @leelacreations
    @leelacreations 6 месяцев назад +2

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

  • @spiritualconsciousness475
    @spiritualconsciousness475 4 месяца назад

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

  • @Techie_Sridhar
    @Techie_Sridhar 7 месяцев назад

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

  • @soldishero_YY
    @soldishero_YY 6 месяцев назад

    Nice video. Informative and entartained.

  • @432aniketkadam4
    @432aniketkadam4 7 месяцев назад

    Great content , make some videos on JavaScript

  • @sike_val
    @sike_val 7 месяцев назад +2

    could you make a tutorial about redux?

  • @shaikyasmeen3947
    @shaikyasmeen3947 4 месяца назад +1

    Please make video on redux and toolkit

  • @fresonn
    @fresonn 7 месяцев назад

    Good, wonderful

  • @manju271989
    @manju271989 7 месяцев назад +1

    Nice one.

  • @MisterBlat
    @MisterBlat 7 месяцев назад

    good videos bud

  • @datokhojava6421
    @datokhojava6421 2 месяца назад +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 ?

  • @JTMoonXX30
    @JTMoonXX30 Месяц назад

    what did you use to make your illustrations?

  • @TokyoXtreme
    @TokyoXtreme 7 месяцев назад

    Accurate.

  • @saivutukuri-o3d
    @saivutukuri-o3d 6 месяцев назад

    Please moste more videos

  • @onlyAI..
    @onlyAI.. Месяц назад

    Please make video on redux too

  • @Aziz0.
    @Aziz0. 2 месяца назад

    11.25 nice one 😂😂

  • @bharatlondhe9995
    @bharatlondhe9995 3 месяца назад

    Besstttt❤❤❤

  • @VoiceHole
    @VoiceHole 7 месяцев назад

    Dope!

  • @prashlovessamosa
    @prashlovessamosa 7 месяцев назад

    great

  • @webhero42
    @webhero42 5 месяцев назад

    2:12 prev + 1

  • @larrasket
    @larrasket 2 месяца назад

    1:23 opensuse

  • @JohnSmith-op7ls
    @JohnSmith-op7ls 5 месяцев назад

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

  • @DoctorMandible
    @DoctorMandible 7 месяцев назад +71

    Which hook uninstalls react and installs svelte 😂

  • @agilidadmental848
    @agilidadmental848 5 месяцев назад

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