hardFrontend

When would you use `useLayoutEffect` instead of `useEffect`?

Q: When would you use `useLayoutEffect` instead of `useEffect`?

**Core concept (TL;DR).** Use useLayoutEffect when you must **read or change the DOM before the browser paints** — typically measuring layout (size/position) and synchronously adjusting it to avoid a visible flicker. It runs **synchronously after DOM mutations but before paint**; useEffect runs **after** paint (asynchronously). Default to useEffect . Before paint (layout) vs after paint (effect) DOM m

514 views

Understand the problem

This question probes a deeper understanding of React's rendering lifecycle and specific hook behaviors.

hooksuseLayoutEffectuseEffectdom

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Measure before paint to avoid flicker

import { useRef, useState, useLayoutEffect } from "react";

export default function App() {
  const boxRef = useRef(null);
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    // measured before the browser paints → no visible jump
    setWidth(boxRef.current.getBoundingClientRect().width);
  }, []);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <div ref={boxRef} style={{ width: "60%", background: "#def" }}>Resize me</div>
      <p>Measured width: {Math.round(width)}px</p>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What do `startTransition` and `useTransition` actually do under the hood?

What is "tearing" in concurrent React?