React Hooks Crash Course (useMemo, useCallback and more).

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

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

  • @YLLIEEGD
    @YLLIEEGD Год назад +82

    Timestamps
    0:43 useState
    4:26 useEffect
    12:46 useContext
    15:48 useReducer
    20:09 useRef
    21:35 useMemo
    23:16 useCallback & useMemo
    28:02 useTransition

    • @nuke7
      @nuke7 11 месяцев назад +1

      23:34 Love Svelte, tired of this react shite...

  • @unagai1111
    @unagai1111 Год назад +15

    I've been following you since 2019 when you were just getting started Just getting back into dev and glad to see that you are closing in to 1M Subscribers. Keep up the great work, you make learning fun!

  • @duwainevandriel9816
    @duwainevandriel9816 Год назад +33

    Something you can discuss in one of your next videos is what the difference is between useContext and a 3rd party provider is like Redux, Zustand or Tanstack is to handle global state. There is a difference 🥳

    • @dailyWalker1
      @dailyWalker1 Год назад

      The only difference is that context is a react build in state management, and others are a separate Library

  • @developedbyed
    @developedbyed  Год назад +19

    Where do Pirates get their hooks from?

    • @thisbevibhor
      @thisbevibhor Год назад +3

      Do you want to "setCourse" to that place? @developedbyed

    • @anshulanand02
      @anshulanand02 Год назад +1

      Facebook

  • @novanoskillz4151
    @novanoskillz4151 Год назад +3

    your useMemo example was the first time ive seen someone make sense of usememo. even my senior dev has had a hard time explaining it. all he ever says is use useMemo to memoize your function hahaha wtf!!! thanks for this video.

  • @lukasGarciaSGS2
    @lukasGarciaSGS2 Год назад +1

    Thanks for helping the community. God bless you! Greetings from Brazil

  • @mr__atiur
    @mr__atiur Год назад

    I've gone through many tutorials but this one cleared my mind with all the unused material and filled it with required data only. Thanks for this precious tutorial my gorgeous friend.🎉❤

  • @rohanyadav2597
    @rohanyadav2597 Год назад +2

    You made a video, when i needed it the most thanks😅

  • @sourmans
    @sourmans Год назад +6

    Amazing content. One request. Explain where you would use each hook in the real world. Your demo for reducer and context were so simple and clear, but I did not understand why these hooks were added to React in the first place

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

    Great video. Just the right amount of detail on each part. Thanks

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

    It would be interesting to see a harmonious use of all available built-in hooks in one as minimalistic application as possible. An interesting challenge for both the author and the viewers.

  • @jensadria
    @jensadria Год назад +2

    "At what point do we just stop and switch over to Svelte" - Truer words have never been spoken. At this point the entire dev world is just suffering from React Stockholm Syndrome

  • @chiragsharma4102
    @chiragsharma4102 Год назад +3

    Added to "pre interview revision" playlist

  • @yajirushik2871
    @yajirushik2871 Год назад

    About the useTransition I din't knew it works like that, what I used every time for real time filtering with fetch was a fetch api with abort signal, this makes things easier 👌

  • @DavidWTube
    @DavidWTube Год назад +18

    Content with value. Something The Primeagen will never grasp the concept of.

  • @kocikoro
    @kocikoro Год назад

    Great video as always! Thank you Ed!

  • @kanodekoubillybrown3025
    @kanodekoubillybrown3025 Год назад

    I'm finally able to wrap my head around hooks ,I've mostly been using useEffect and useState, I just realized i've not been using the right approach.

  • @MoreToLifeThanCode
    @MoreToLifeThanCode Год назад

    Awesome content as always. This beign a React hooks crash course, the project name 'my-vue-app' got my eyes hooked! 😂

  • @robottalks7312
    @robottalks7312 28 дней назад

    What is the extension used to show which component rendered ?

  • @ashutosh_tiwari
    @ashutosh_tiwari Год назад

    hey Ed thanks for this amazing video, can you please use all of these hooks in a project and show us a glimpse of why it is used and where to use the specific hook. Except (useState, useRef, useEffect, useEffectLayout)

  • @MasterOfMisc
    @MasterOfMisc Год назад

    Thanks for this video and for walking through all these. I especially like the idea of using Zustand. Will you ever make a video tutorial on this state management library?

  • @AlexSmith-ms9xb
    @AlexSmith-ms9xb Год назад

    Thanks for such amazing content. Please, please, please make a Zustand crash course!

  • @HoNow222
    @HoNow222 Год назад +3

    "I'm tired of all this React shite"
    Us too brother, us too. ahah

  • @zeeebooo86
    @zeeebooo86 Год назад +1

    Thank you man!! Appreciate it!

  • @aryankalra5640
    @aryankalra5640 Год назад +1

    When you are trying to understand useMemo and useCallback by yourself 30:25

  • @libock_serge
    @libock_serge 6 месяцев назад +1

    Terrible joke right off the bat? Instant like 😆👍

  • @sreeharshad1760
    @sreeharshad1760 Год назад

    hi
    when ever i use hooks in my own custom library i getting the error saying cannot read the null with the hook i used

  • @muhamadbadriyusuf5686
    @muhamadbadriyusuf5686 Год назад

    Hi ed..i need nextauth tutourial from you .. thanks ed

  • @Raphael-bq1fc
    @Raphael-bq1fc Год назад

    can someone explain at 9:24 again? why does it skip the count by 2?

    • @bartek_szajna
      @bartek_szajna Год назад +1

      little late but: probably the component wrapping the whole app, it renders it twice for debugging purposes

  • @suvigyabasnotra7378
    @suvigyabasnotra7378 Год назад +1

    30:45 Is that his vape on the table??

  • @iedi3
    @iedi3 Год назад

    It’s funny the last part, Svelte. I’m learning React, due to popularity, while already using Vue. But I would’ve wanted to try Svelte… but there’s only an amount of time you can spend learning new things, while also having commercial skills, I’m also learning node/express, again, I wish I would’ve learned Nest…😂

  • @bakhtiyor_sulaymonov
    @bakhtiyor_sulaymonov Год назад

    You made me think about svelte )

  • @pedrobarbeitos
    @pedrobarbeitos Год назад

    this was great thank you !

  • @sunbertyv3947
    @sunbertyv3947 Год назад

    I have this problem, i downloaded node, and installed react with all packages, but then when i do localhost3000 i don't see my page, what can i do

  • @bayandamabuza6587
    @bayandamabuza6587 Год назад +1

    What's the diff of setCount(count+1) and
    setCount(prev => prev + 1)
    When updating the count
    Which to use?

    • @thisbevibhor
      @thisbevibhor Год назад +2

      setCount(count+1) would run with the current value of "count" which could be stale and you don't want to use it, setCount(prev => prev + 1) updates using the previous state where prev represents the previous value. This approach ensures that you're working with the most up-to-date state value because React guarantees to provide the latest state snapshot to the functional update.

    • @skyhappy
      @skyhappy Год назад +1

      Use the later one, it makes your life easier, it works like await where it updates the state immediately and not async

    • @JaiRaj26
      @JaiRaj26 Год назад +1

      @thisbevibhor is right. Also Read about 'React Batching'.

  • @hiberniankingy
    @hiberniankingy Год назад

    A thumbs up for questioning why we haven't moved over to Svelte lol

  • @PoprostuTaki
    @PoprostuTaki Год назад

    Can you make a video about useSyncExternalStore? For example with data synchronization from localStorage?

  • @benixmaximus
    @benixmaximus Год назад

    Hello. Do you ever run specials on your full stack course? I love the stack that you have chosen by the way.

  • @cggs3001
    @cggs3001 Год назад

    Svelte series!

  • @wajdwael8775
    @wajdwael8775 Год назад

    We need videos about React & TypeScript...

  • @rowsncols
    @rowsncols Год назад

    Does anyone know what color theme he's using?

  • @محمدعمر-ي2خ
    @محمدعمر-ي2خ Год назад

    We need 3d website tutorials 😁

  • @kanodekoubillybrown3025
    @kanodekoubillybrown3025 Год назад

    Could you make a short video no how to make jquery work in nextjs13 app directory

  • @tseringlama2146
    @tseringlama2146 Год назад +1

    hello brother please make a video on (express js) backend and (next js ) frontend about "server side " filtering data and pagination not using server action

  • @abhishektomar7306
    @abhishektomar7306 Год назад

    Thanks Ed !!!

  • @mohamedGado3
    @mohamedGado3 Год назад

    what's the extension name?

  • @Lazllb
    @Lazllb Год назад +3

    Just recently jumped into React, coming from mostly a C/C++ background. It’s funny that l was literally looking these up yesterday. Thank you for these videos.
    I think my biggest confusion is with useCallback specifically and the dependency array. When using useCallback with an empty array, variables from useState are automatically updated but when using for example the result of a TanStack query inside the callback, they won’t update without specifying the dependency. Is this because in order to use an empty array, the variables should be referentially equal to each other?
    What sucks about React from a newbie perspective is thinking you know how all these hooks work and then realizing they do something internally completely differently than what you expected.

  • @RichardWalterLanda
    @RichardWalterLanda 10 месяцев назад

    thanks mate

  • @yathink2406
    @yathink2406 Год назад

    Can you make video on most underrated hook “useImperativeHandle” which is most useful

  • @stefansweb
    @stefansweb Год назад +2

    Can we get a link to Github with these examples?

  • @abuzubaer3083
    @abuzubaer3083 Год назад

    thank you

  • @daromacs
    @daromacs Год назад

    hey Ed some arduino or ESP32 projects with react interaction would be amazing!

  • @VikramSharma-cd4oy
    @VikramSharma-cd4oy Год назад +2

    I just reached this topic today 😂 while revision 😂😂

  • @GamingZone11
    @GamingZone11 Год назад

    Hey bro create a video on how Javascript behind the scene work and also console.log behind the scenes work. Try to add more interviews stuff in your video so we developer knows everything thing

    • @GamingZone11
      @GamingZone11 Год назад

      I will be waiting for your next videos😊

  • @Nab_001
    @Nab_001 Год назад

    I already know how they work I just want to relearn them your way

  • @duwainevandriel9816
    @duwainevandriel9816 Год назад

    when to use useMemo and when to use useReducer

  • @DeMayzr
    @DeMayzr Год назад

    You should add chapters to this video

  • @SamMuhammad-y8s
    @SamMuhammad-y8s 11 месяцев назад

    good

  • @tjbechard7059
    @tjbechard7059 Год назад

    🔥 🔥 🔥

  • @meharsain728
    @meharsain728 Год назад

    @developedbyed Can you make a video on React Error Handling? like there's error boundry which react provide idk why these component are class component and theirs also react-error-boundry npm which actually provide you with hooks..... please NATURE DO SO ACTION MAKE ed SEE MY COMMENT & MAKE VIDEO ON IT

  • @Mr-Yuki
    @Mr-Yuki Год назад

    Bro i started learning react 2 days ago or so.... Stop READING MY MIND!

  • @b1mind
    @b1mind Год назад +1

    useSvelte()

  • @SatyamSingh-nr9tm
    @SatyamSingh-nr9tm Год назад +1

  • @王俊-l4e
    @王俊-l4e Год назад

    import React, { useEffect, useState } from 'react'
    const Test = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
    const vv = setInterval(() => {
    setCount(prev => prev + 1)
    }, 1000)
    }, []);
    return (
    { setCount(prev => prev + 1) }}>{count}
    )
    }
    export default Test
    i have no problem`` why?

  • @mawrez0098
    @mawrez0098 Год назад

  • @AhmedZahid-fq3ky
    @AhmedZahid-fq3ky Год назад +1

    wow

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

    🎉

  • @Seven77tw
    @Seven77tw Год назад

    i love you

  • @nuke7
    @nuke7 11 месяцев назад

    23:34 Love Svelte, tired of this react shite...

  • @joshuamodiba853
    @joshuamodiba853 Год назад

    🤦oh man i liked the components by what's up with these hooks limitations and easy to make bugs

  • @carlosdavid4800
    @carlosdavid4800 Год назад +1

    First 😁

  • @juanmacias5922
    @juanmacias5922 Год назад

    Crying in SolidJS ;_;

  • @rajeshp9319
    @rajeshp9319 Год назад +1

    I was first comment

  • @solomonforjesusfoundation830
    @solomonforjesusfoundation830 Год назад

    I want to develop a world standard social media app with over 25 different features, please can you help me or introduce me to a professional company ??

  • @nope00372
    @nope00372 Год назад

    perso

  • @Briefklammer1
    @Briefklammer1 Год назад +3

    React is a mess

  • @fadynader8778
    @fadynader8778 Год назад

    hey man
    just out of curiosity.. are you gay ? 😅😅

    • @sajidhssi3445
      @sajidhssi3445 Год назад

      he made a video a few months/a year ago with his girlfriend...

  • @dragx26
    @dragx26 Год назад

    If I get it 👈
    I'll subscribe 😐🙂

  • @GoeHybrid
    @GoeHybrid Год назад

    I hate hooks. They make code so hard to reason about + easily create bugs.

  • @pjc825
    @pjc825 Год назад

    I second the useSvelte() comment, its time to move away from all this ridiculous complexity 💯😃👍