Learn useLayoutEffect In 5 Minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ม.ค. 2025

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

  • @yarngoblyn
    @yarngoblyn 3 ปีที่แล้ว +15

    Holy moly, I ran in the exact same problem last week. A calendar in react marked my query range but also the init range, because the timing of the useEffect was terrible. My stupid solution was a chained useEffect (first useEffect changes a helper value and nothing more, which triggert a second useEffect only for this value and put my parameters in the components). I think I will give useLayoutEffect a try if I have to change the application again. Thank you for the video.

  • @MrZiyak99
    @MrZiyak99 3 ปีที่แล้ว +21

    I had used this for a project where I needed to set css properties in the component itself. Very useful hook for some niche cases.

  • @samael1864
    @samael1864 10 หลายเดือนก่อน +1

    Спасибо. Более подробного и компактного объяснения не встречал. Как всегда четко и по делу.👍

  • @Stoney_Eagle
    @Stoney_Eagle 3 ปีที่แล้ว +9

    Synchronous use Effect 😍😍😍
    I have some places this will definitely feel home.

  • @programmingwithmoaad3513
    @programmingwithmoaad3513 3 ปีที่แล้ว +10

    Thanks Kyle
    as usual extremely simple and clear explanation

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

    I had same requirement to implement and I was about to loose my mind because it was not working out, until I came across your video. Thank you very much WebDevSimplified !!!

  • @muratasarslan2359
    @muratasarslan2359 2 ปีที่แล้ว +5

    This thing couldn't be explained better, thank you 👏

  • @user8ZAKC1X6KC
    @user8ZAKC1X6KC 3 ปีที่แล้ว +1

    New to react here... I've been using useEffect in the tutorials I've been taking but I didn't understand what exactly it did. I mean the name kind of explains it, but I didn't fully grasp what it did, 30 seconds into this video and I'm like "ohhhh! 🤦" Thank you!!!!

  • @petarkolev6928
    @petarkolev6928 3 ปีที่แล้ว +6

    Kyle, yet another extremely simple and ultra useful explanation!!! Thank you!!!

  • @arpitagrawal7355
    @arpitagrawal7355 ปีที่แล้ว +1

    thanks for this very helpful explanation. your react hooks playlist is awesome!

  • @tiagoneto8658
    @tiagoneto8658 2 ปีที่แล้ว +1

    Many tried... but you did it! Thank you for making me understand this!

  • @legendaryseoking6685
    @legendaryseoking6685 ปีที่แล้ว

    spend 20min reading and trying to understand this, and Kyle just explain it to me in a 4 min video at playback 1.5x speed LOL Thank you Kyle!

  • @ianeltombozafy5847
    @ianeltombozafy5847 3 ปีที่แล้ว +6

    So if it's related to something visible to the UI (layout), we use useLayoutEffect. It's interesting..... Thank you man 😉

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

    Great video, very clear and helpful-thank you so much!

  • @Vaibav
    @Vaibav 3 ปีที่แล้ว +1

    Lot of clarity in very little time. 🥂✨

  • @neoncut
    @neoncut 3 ปีที่แล้ว +43

    I can feel the effect of this already

  • @robx_001
    @robx_001 2 ปีที่แล้ว

    in 5 minutes i found out all what i need. Thanks

  • @SuperIvan231
    @SuperIvan231 3 ปีที่แล้ว +3

    Perfectly explained , thank you !

  • @brunofilgueiras3518
    @brunofilgueiras3518 2 ปีที่แล้ว

    Kyle, thanks for your explanation will never forget the difference now :)

  • @nachiketjoshi3878
    @nachiketjoshi3878 ปีที่แล้ว

    Best example and best explanation

  • @MsPrakhar12
    @MsPrakhar12 3 ปีที่แล้ว +1

    hats off to this example!

  • @mauro21523
    @mauro21523 2 ปีที่แล้ว

    Thanks for the explanation Kyle, learning React in 2022!

  • @v0.1-y1j
    @v0.1-y1j 3 หลายเดือนก่อน +1

    Damn I actually learned it in 5mins!

  • @yassinerassy6840
    @yassinerassy6840 2 ปีที่แล้ว

    thank you for this amazing explaination and for putting the right useCase for useLayoutEffect hook

  • @Pareshbpatel
    @Pareshbpatel 3 ปีที่แล้ว +1

    Very clear explanation of why one would use the useLayoutEffect hook over the useEffect hook. Thanks, Kyle
    {2021-11-16}

  • @cesarcachay8417
    @cesarcachay8417 ปีที่แล้ว

    Awesome explanation 🎉

  • @jackie0988
    @jackie0988 2 ปีที่แล้ว

    nice explanation! I really needed this hahaha

  • @sacidcelik4932
    @sacidcelik4932 3 ปีที่แล้ว +1

    Super useful, thanks! Could have used it in one of my projects 😄

  • @kapilthukral618
    @kapilthukral618 2 ปีที่แล้ว

    Explained it beautifully

  • @cocolasticot9027
    @cocolasticot9027 3 ปีที่แล้ว

    This is dope !
    I now have a previous project to fix 😄

  • @arunbm123
    @arunbm123 ปีที่แล้ว

    beautifully explained !!

  • @mathalphabet5645
    @mathalphabet5645 3 ปีที่แล้ว

    Thank you for your videos. They are really helpful.

  • @ivandimitrov7679
    @ivandimitrov7679 3 ปีที่แล้ว

    You are the best! I really like your videos :)

  • @astiano25
    @astiano25 3 ปีที่แล้ว

    This was new to me, thanks!

  • @MadhanR-bh8dt
    @MadhanR-bh8dt 3 ปีที่แล้ว +3

    Hey superhero! Is there any plan to upload featherjs course in future?

  • @prince5922
    @prince5922 2 ปีที่แล้ว +2

    For those learning this in react 18, you will not get this inconsistency because in react 18 useEffect will run synchronously when it is as a result of discrete user input such as a click.

    • @scaz182
      @scaz182 2 ปีที่แล้ว

      Thanks for the heads up, was going mad trying to reproduce this scenario. Wrapping in setTimeout (moving it outside of the event handler task), will cause it to behave as per the video e.g.
      onClick={() => {
      setTimeout(() => {
      setShow((prev) => !prev);
      }, 0);
      }}

    • @scaz182
      @scaz182 2 ปีที่แล้ว

      It also helps if you throttle your CPU in chrome

  • @maguilecutty
    @maguilecutty 3 ปีที่แล้ว

    HAL-AY-LOO-YA! Thank you so much a. for explaining this so well that i got it first time and B fixing all my animations!

  • @DEV_XO
    @DEV_XO 3 ปีที่แล้ว

    Amazing info mate, thanks!

  • @Wakkyguy
    @Wakkyguy 2 ปีที่แล้ว +3

    At what point does our refs get associated to the dom elements? Does it happen before the execution of useLayoutEffect?

    • @sandeshsapkota6341
      @sandeshsapkota6341 2 ปีที่แล้ว +1

      before painting useLayoutEffect runs and before that rendering of DOM elements happens I guess At that point refs get associated.

  • @adarshchakraborty
    @adarshchakraborty 3 ปีที่แล้ว

    You explained it so well

  • @sergeyplotnikov5031
    @sergeyplotnikov5031 2 ปีที่แล้ว

    Great explanations

  • @ridl27
    @ridl27 3 ปีที่แล้ว

    wow! its so ez & clear to learn from you :D

  • @enrique2652
    @enrique2652 3 ปีที่แล้ว

    thanks bro, great video!!!

  • @sanjaysodani5994
    @sanjaysodani5994 2 ปีที่แล้ว

    Nice, please make a video on React Router DOM V6 for Authentication and Protected Routes

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

    in react18, there are same when use these 2 hooks, it doesnt have a position change use useeffect, same as using uselayouteffect

  • @tarieltitirashvili2257
    @tarieltitirashvili2257 2 ปีที่แล้ว

    cool explanation thanks

  • @eleah2665
    @eleah2665 3 ปีที่แล้ว

    Good demo. Thanks.

  • @ramupalitham141
    @ramupalitham141 3 ปีที่แล้ว +1

    How did they handled this use case before useLayoutEffect ?

  • @SushilKumar-ig8ls
    @SushilKumar-ig8ls 3 ปีที่แล้ว

    Totally loved it

  • @ArjunSingh-fz9op
    @ArjunSingh-fz9op 3 ปีที่แล้ว

    So much clarity

  • @rounakjain5774
    @rounakjain5774 2 ปีที่แล้ว +1

    You will not be able to see the change in the position of the text when you use useEffect. This is because of the part where he says, "I am going to slow this down" without explaining how.
    You should simply add a "debugger;" statement instead as the first line of your "useEffect" callback. That will pause the execution and allow you to see the initial rendering.
    This actually raises another question: The explanation in this video gives the impression that "useLayoutEffect" will render at the appropriate place without any moving around of the text because it is called before painting. If you add a "debugger;" statement as the first line of your "useLayoutEffect" callback, you can see the initial placement (which means a paint has occurred already). I did not use .

  • @DanielCamposArce
    @DanielCamposArce 2 ปีที่แล้ว

    Your video do what other 5 previous didn't, that I know what is layout effect

  • @rajbannasa7662
    @rajbannasa7662 3 ปีที่แล้ว

    Thank you so much sir ❤️

  • @ГарикВонави
    @ГарикВонави 3 ปีที่แล้ว

    interview-quality example)

  • @dagonzalez1757
    @dagonzalez1757 3 ปีที่แล้ว +1

    Why does the component rerender after setting the new top parameter? I get that it rerenders after the onClick, but then, after the useEffect runs and changes the top value, it renders again, why if there's no state change?

    • @arjobansingh1940
      @arjobansingh1940 3 ปีที่แล้ว +2

      Yes react re-renders the component when state changes only.
      But here, we directly accesses the underlying dom element and changed its properties, as described in useRef, ref always has access to underline DOM element.
      it’s basically like getting that element by query selecting it.
      eg
      const element = document.querySelector(“.modal”) ;
      So basically this element is equal to the element ref has access to.
      And ofcourse every direct change we make to DOM element will reflect on browser, doesn’t matter if react is rerendering it or not.

    • @dagonzalez1757
      @dagonzalez1757 3 ปีที่แล้ว

      @@arjobansingh1940 Oh I see, thanks!

    • @jbjbjb_
      @jbjbjb_ 2 ปีที่แล้ว

      Excellent question!

  • @maheshmurugan5527
    @maheshmurugan5527 3 ปีที่แล้ว

    This is wonder full

  • @k2NKbov6
    @k2NKbov6 3 ปีที่แล้ว

    nice example 👍

  • @MaxProgramming
    @MaxProgramming 3 ปีที่แล้ว

    Finally a worthy tutorial!

  • @GG-uz8us
    @GG-uz8us 2 ปีที่แล้ว

    Can you talk about forwardRef? Thank you.

  • @crazyshala4571
    @crazyshala4571 3 ปีที่แล้ว +1

    I have one problem in react actually currently working on a project where they have dynamic bundles or cdn links which add some header and footer in our react app but I need to add some event listeners or doing some DOM manipulation on them dynamically but the problem is that html element come from different bundles Or application and I didn't have an access to those html elements from our react app so I can't add ref on those elements so can I do direct Dom manipulation on element because I read don't directly manipulate DOM because react working on virtual DOM any other solution ?

    • @ishananaguru
      @ishananaguru 3 ปีที่แล้ว

      if you import them as components you can set ref attribute to them I think.

    • @crazyshala4571
      @crazyshala4571 3 ปีที่แล้ว

      @@ishananaguru we can't import them as component it's actually a cdn links or bundle links which add header and footer in mine application Something like bootstrap cdn which add some style in application but we can't manipulate there code directly

  • @JJonic
    @JJonic 3 ปีที่แล้ว

    Easy explained.

  • @YiannisChristodoulou
    @YiannisChristodoulou 3 ปีที่แล้ว

    thanks mate!

  • @aashiqahmed5273
    @aashiqahmed5273 3 ปีที่แล้ว

    So uselayouteffect runs after commiting to the ui after re render

  • @sanghvian
    @sanghvian 3 ปีที่แล้ว

    I mean.............I just love you man

  • @maor44
    @maor44 3 ปีที่แล้ว

    Amazing!

  • @UChar0
    @UChar0 ปีที่แล้ว

    Why not use useEffect only and toggle visibility using css display?

  • @vibelover5444
    @vibelover5444 3 ปีที่แล้ว +2

    I always love to see Leonardio DiCaprio in his young! great content!

  • @DrNabeel20
    @DrNabeel20 3 ปีที่แล้ว

    Thank you

  • @PratikBhurewar
    @PratikBhurewar 3 ปีที่แล้ว

    Thanks

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

    his hair are more clear than my life

  • @rajashekerreddyv8651
    @rajashekerreddyv8651 2 ปีที่แล้ว

    ahh i got the idea .now, where and how to useEffect and UseLAyout

  • @kuysjess7821
    @kuysjess7821 2 ปีที่แล้ว

    I thought I had my playback speed increased suddenly xD

  • @silencyo2353
    @silencyo2353 2 ปีที่แล้ว

    How to use useLayoutEffect hook in react-plotly

  • @r34ct4
    @r34ct4 3 ปีที่แล้ว +2

    Have I been saying "measurements" wrong?

  • @shivamprakash6796
    @shivamprakash6796 3 ปีที่แล้ว

    Only *useImperativeHandle* left to be explained! 😎

  • @svampefett
    @svampefett 2 ปีที่แล้ว

    Guess this is why we get those annoying height jumps if we try to animate height?

  • @cmac2cmac
    @cmac2cmac 3 ปีที่แล้ว

    useful!

  • @umbalaxx
    @umbalaxx 3 ปีที่แล้ว +1

    Didn’t know Andrew Garfield Spiderman can code

  • @tochithebedford7672
    @tochithebedford7672 2 ปีที่แล้ว

    beautiful

  • @JEsterCW
    @JEsterCW 3 ปีที่แล้ว

    Great

  • @HarshalDhumal15
    @HarshalDhumal15 ปีที่แล้ว

    I thought I was watching at 1.25 speed :P

  • @gabrielavila3224
    @gabrielavila3224 3 ปีที่แล้ว

    i thought, useEffect is equivalent to componentDidUpdate and useLayoutEffect is equivalent to componentShouldUpdate, and i use these for certain scenarios, omg

  • @shaneomoore
    @shaneomoore 3 ปีที่แล้ว

    Maysurmints 😂 love these videos 💪

  • @anonfourtyfive
    @anonfourtyfive ปีที่แล้ว +1

    One thing YOU NEVER EXPLAINED and probably confuse ALOT of people and deceives alot too.
    the JSX is render BEFORE the useEffect normal behavior.
    I've struggle like hell because most Tuto doesn't even explain this simple concept.
    and I'm the f***ing noob.

  • @proepiccoder
    @proepiccoder 3 ปีที่แล้ว +1

    Hi

  • @hardwired66
    @hardwired66 3 ปีที่แล้ว

    why 5minutes 😭 but thank you

  • @newdeveloper3633
    @newdeveloper3633 2 ปีที่แล้ว

    ✅✅✅❤️

  • @jitendrasharma-em2yg
    @jitendrasharma-em2yg 3 ปีที่แล้ว +1

    Your talking speed is very fast pls do slow speak speed!!

  • @junsong2361
    @junsong2361 3 ปีที่แล้ว

    excellently, the only one i cant satisfied is your speaking is too fast 😂

  • @Meerasingh0704
    @Meerasingh0704 3 ปีที่แล้ว

    Second!!

  • @FireMuscle11
    @FireMuscle11 3 ปีที่แล้ว

    Firsttttttt

  • @brianlemon2
    @brianlemon2 2 ปีที่แล้ว

    No semicolons noooooooooooo

  • @alexandersegovia8529
    @alexandersegovia8529 ปีที่แล้ว

    You explain to fast... sadly

  • @akashmishra9833
    @akashmishra9833 3 ปีที่แล้ว

    Hii i am from India there is night 10.30 pm what is your country time tell me plz

    • @HarshSingh-hk8fe
      @HarshSingh-hk8fe 3 ปีที่แล้ว +2

      Stop posting bullshit comments🤦🤦

    • @akashmishra9833
      @akashmishra9833 3 ปีที่แล้ว

      @@HarshSingh-hk8fe bro I want to know that where he is live

  • @Meerasingh0704
    @Meerasingh0704 3 ปีที่แล้ว

    Hey kyle do check your email. I love your way of teaching. Are you getting married anytime soon? 💔

  • @kimzcodes
    @kimzcodes 3 ปีที่แล้ว

    good but as i know manipulating dom by the normal way like (style.top) is anti-pattern

    • @dashyftw
      @dashyftw 2 ปีที่แล้ว

      How would you accomplish this without a style attribute?

  • @ינוןאלבז-כ1ז
    @ינוןאלבז-כ1ז 3 ปีที่แล้ว

    Thanks

  • @touseefamjad416
    @touseefamjad416 ปีที่แล้ว

    Great

  • @proepiccoder
    @proepiccoder 3 ปีที่แล้ว +1

    Hi

  • @deepcrashcourse
    @deepcrashcourse 2 ปีที่แล้ว

    Thanks

    • @WebDevSimplified
      @WebDevSimplified  2 ปีที่แล้ว

      You are very welcome! Thanks for the support!