Difference Between useEffect and useLayoutEffect in React

#javascript #react

The difference between useEffect and useLayoutEffect is usually described in terms of timing one executes before the browser paints, and the other executes after. To verify this, I ran a controlled experiment and used Chrome DevTools to observe their execution on the performance timeline.

Experiment Setup

The React component under test


import { useEffect, useLayoutEffect } from "react";
import "./App.css";

function App() {
  useEffect(() => {
    performance.mark("effect-executed");
  }, []);

  useLayoutEffect(() => {
    performance.mark("layout-effect-executed");
  }, []);

  return <div className="center-box">Text</div>;
}

export default App;

Both hooks record performance marks so their exact execution time can be identified in the timeline.

Observation

After recording the page load in Chrome’s Performance panel, the

following sequence was visible

The marker layout-effect-executed appears on the timeline before the first paint event.
The marker effect-executed appears after the first paint has completed.

The flame chart makes this distinction clear