Learn React Hooks: useLayoutEffect - Simply Explained!

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
In this video we will learn about React hooks, starting with useLayoutEffect. This powerful React hook will allow you to run an effect before the browser paints the screen and the component is rendered. This works in exactly the same way as useEffect, with the only difference that useLayoutEffect is synchronous and will block rendering to execute its code. Most of the times useEffect is all you need, but sometimes useLayoutEffect is a better choice!
In this new React world, hooks are here to stay, so it's best to learn them! In this tutorial I demonstrate the useLayoutEffect React hook, and I explain it very simply and in a way that is easy to understand. Enjoy!

Пікірлер: 50

  • @cosdensolutions
    @cosdensolutions3 ай бұрын

    Hey everyone! I just launched 🚀 Project React, which is a course that teaches you React by building a real-world project. It goes way beyond what you see in these videos and walks you through step-by-step on how to build a big and complex application with React! You can check it out here: cosden.solutions/project-react

  • @erik.schlegel
    @erik.schlegel6 ай бұрын

    Just got through your Learn React Hooks playlist. Big fan of your natural and snappy teaching and crisp editing. You were a tremendous help on my react journey and I am very grateful to have found your channel. Links to your content are henceforth being included in all my see more... documentation. Cheers!

  • @cosdensolutions

    @cosdensolutions

    6 ай бұрын

    Thank you for the kind words! Really glad you found the videos useful ☺️

  • @mdzaidsiddiqui4262
    @mdzaidsiddiqui42627 ай бұрын

    This is the best useLayoutEffect explanation I've ever seen on yt. Thank you!

  • @danteDeveloper
    @danteDeveloper7 ай бұрын

    Great talk. I just want to point small things setState is not asynchronous, but rendering works asynchronously. Thank you Cosden, what a wonderful speech.

  • @Leyksnal
    @Leyksnal7 ай бұрын

    I really dont need to watch another video , U killed it, thanks

  • @brunoguerra7160
    @brunoguerra71607 ай бұрын

    very good!! brings the useTransition hook

  • @saalimbhatkar6403
    @saalimbhatkar6403Ай бұрын

    Great Explanation ❤!

  • @oProfessorJohnny
    @oProfessorJohnny6 ай бұрын

    thank godness, i can not beleave in how you can teach so clearly and direct on the point, you are amazing brow please keep making more videos!

  • @cosdensolutions

    @cosdensolutions

    6 ай бұрын

    Thank you for the kind words! ☺️ will do

  • @angletheeta
    @angletheeta6 ай бұрын

    sir your words are words "welcome back to the last {topic} tutorial video you ever going to after watch" I experienced that so many times in every time watching 2 or 3 tutorials and get nothing from those and come to the cosden solutions yes i do not need to watch another. Thank you for your great effort that you put to uplift the youngsters knowledge . You may deserve over 1M subscribers soon. Hats off from Sri Lanka❤

  • @navinkumarsahu1159
    @navinkumarsahu11596 ай бұрын

    clear to the exact point thanks a lot videsi guy

  • @DKevin-rb6vh
    @DKevin-rb6vh2 ай бұрын

    Wonderful explanation :) Keep up the great work buddy. Love from India

  • @kunals6879
    @kunals68793 ай бұрын

    Your videos are more easy to follow than Meta's own React Certification Course

  • @Movoid12
    @Movoid127 ай бұрын

    Thank you for the great video 👍

  • @sanjoyrakshit842
    @sanjoyrakshit8427 ай бұрын

    Very useful information thanks love from India ❤❤

  • @tigranharutyunyan7674
    @tigranharutyunyan76746 ай бұрын

    You are awesome. Please keep on.

  • @revanrivani770
    @revanrivani7707 ай бұрын

    Amazing video. I had an issue a few days back using react-native. Where I wanted to change the navigation name in a component and if u navigate to “quick” u could see the old name and then change to the new name. So that’s when layouteffect came in clutch

  • @cosdensolutions

    @cosdensolutions

    7 ай бұрын

    beautiful

  • @ivolovyk
    @ivolovyk7 ай бұрын

    Great video, thanks. I think working with DOM is a great case for useLayoutEffect. useLayoutEffect will return the correct sizes of elements via ref on the first render, while useEffect will return 0 because it takes sizes before DOM is ready.

  • @cosdensolutions

    @cosdensolutions

    7 ай бұрын

    absolutely!

  • @saalimbhatkar6403
    @saalimbhatkar6403Ай бұрын

    Thanks a lot!

  • @prakashraj4519
    @prakashraj45197 ай бұрын

    Loved it ❤

  • @ekchills6948
    @ekchills69487 ай бұрын

    You delivered 👌

  • @deepakkashyap6538
    @deepakkashyap65387 ай бұрын

    Great explanation serr 👌, having an indepth idea about hooks in general can help Developers take informed decision while designing the architecture of the application and avoid technical debts interms of performance of the application is considered.

  • @rometpastak1
    @rometpastak17 ай бұрын

    Why not bring out some example of thoses cases you actually use it then?

  • @QuanTran-wt4yt

    @QuanTran-wt4yt

    5 ай бұрын

    normally, i would use it with animations because it requires precise layout

  • @harag9
    @harag97 ай бұрын

    Great video, never seen that use hook before, but interesting how it works compared to useEffect. However I can't think of a reason when you would use it as you say 99% of the time the useEffect is better.

  • @cosdensolutions

    @cosdensolutions

    7 ай бұрын

    usually used when you need to get sizes and dimensions of html elements through ref to compute things!

  • @harag9

    @harag9

    7 ай бұрын

    @@cosdensolutionsAhh, good to know. thanks. :)

  • @islambn8962
    @islambn89627 ай бұрын

    Thank you for the great tutorial. Although React Docs does not recommend useLayoutEffect, sometimes it's the only way. for ex: persisting DarkMode or checking user login status

  • @imamdroubi6537
    @imamdroubi65374 ай бұрын

    Thanks a lot for this series, for this specific hook, is it good to use it in a protected route for example ? where you need to check if there is a user in the auth context, it takes some time , and you don't want the user to see the page if he isn't logged in, so does it make sense to use this hook in this situation to block the page from rendering for un-authorized users ?

  • @cosdensolutions

    @cosdensolutions

    4 ай бұрын

    a better idea would be to show a loader while that happens, with a normal useEffect!

  • @imamdroubi6537

    @imamdroubi6537

    4 ай бұрын

    @@cosdensolutions Thanks

  • @haikelareff
    @haikelareff4 ай бұрын

    how do we set different theme to each multiple (dynamic) pages ex: category pages, or maybe random themes for each blogpost? in next14

  • @bikrantjungbudhathoki3687
    @bikrantjungbudhathoki36877 ай бұрын

    Name of the theme you're using???

  • @serbanmarin-eusebiu
    @serbanmarin-eusebiu6 ай бұрын

    I am just curious, because I use quite often use useLayoutEffect for the next scenario, I have a user state in redux, that on every refresh I need to get from the server(golang server), so the base ideea was to use use useLayoutEffect to remove the errors of the application as well to remove the flickering from user useEffect. What’s your ideea about it? Do you think could be done better?

  • @cosdensolutions

    @cosdensolutions

    6 ай бұрын

    I wouldn't necessarily use useLayoutEffect for that, I would use a normal useEffect and fetch the user and while it is fetching, show a loading spinner on the whole app. Then once the user is available, you can render the rest of the app. No need specifically for useLayoutEffect!

  • @AykutKlc
    @AykutKlc5 ай бұрын

    6:47 how does calling setState stop rendering? is the returned value ignored?

  • @-mahmoudadel2628

    @-mahmoudadel2628

    Күн бұрын

    You mean the clean up function, right?

  • @vesa95
    @vesa957 ай бұрын

    Great, great video, I’m always here to show my appreciation, but Darius, sunt in stare de soc, esti roman? 😱

  • @cosdensolutions

    @cosdensolutions

    7 ай бұрын

    Da hahahaha

  • @vesa95

    @vesa95

    7 ай бұрын

    @@cosdensolutions fantastic, ti-am dat add pe linkedIn, nu-mi vine sa cred ca fix persoana de la care abia astept sa posteze ceva nou despre react (din tot yt) e la 50 de km de mine 😂

  • @oz4549
    @oz45497 ай бұрын

    2:05 please what do you mean by derive the state? thanks

  • @Ethereal792

    @Ethereal792

    7 ай бұрын

    Instead of setting `isAdmin` from a useState hook `setIsAdmin`, you can simply add something like `const isAdmin = userId === 1`

  • @cosdensolutions

    @cosdensolutions

    7 ай бұрын

    Yes exactly

  • @oz4549

    @oz4549

    7 ай бұрын

    ​@@Ethereal792Thanks 🙏

  • @zeeshanalic
    @zeeshanalic7 ай бұрын

    React-router-dom v6 make a video on it. kindly!

  • @cosdensolutions

    @cosdensolutions

    7 ай бұрын

    yep, it's on the list!

  • @xxXAsuraXxx
    @xxXAsuraXxx7 ай бұрын

    another foot gun from react