DEV Community

Cover image for UseEffect and useLayoutEffect differences
Deepak Jaiswal
Deepak Jaiswal

Posted on • Edited on

1 2 1 1 1

UseEffect and useLayoutEffect differences

Today we discuss what is difference between on those hooks in react and when we use it.

useEffect is the most popular hooks and came to replace componentDidMount, componentDidUpdate, and componentWillUnmount.

Implementation is the same as useEffect, but useLayoutEffect, will wait until React finishes with all its DOM manipulations and then do yours. This is best difference.

const App = () => {

  useLayoutEffect(() => {
    console.log("this is useLayoutEffect");
  }, []);

  useEffect(() => {
    console.log("this is useEffetct");
  }, []);

  console.log("Render of component");

  return <div>Hello, India Walo</div>;
};
Enter fullscreen mode Exit fullscreen mode

Output in console

`Render of component
this is useLayoutEffect
this is useEffetct

`

This hook is synchronous, meaning that React waits for all the logic within the hook to complete and execute immediately after the rendering phase, but before drawing the changes on the screen.
The steps is the following:

  1. Enter the render phase.
  2. Execute useLayoutEffect.
  3. Draw the changes on the screen.
  4. Execute useEffect.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay