useEffect vs. useLayoutEffect in React ⚛️

Both useEffect and useLayoutEffect are hooks used to run side effects in functional components. The key difference lies in when they run in the component lifecycle.

1️⃣ useEffect — Runs After Painting 🖼️

• When it runs:
  After the component has rendered and the browser has painted the UI.

• Use it for:

  • Fetching data (API calls).
  • Setting up subscriptions.
  • Updating document titles.
  • Animations that don’t block the render.

• Example:

  import { useEffect } from "react";
  
  function Example() {
  useEffect(() => {
  console.log("useEffect - runs after render");
  document.title = "Hello World!";
  }, []);
  
  return <div>Hello, World! 👋</div>;
  }

• ✅ Pros: Doesn’t block painting → smoother UI.

• ⚠️ Cons: There might be a visual flicker if DOM changes happen here.

2️⃣ useLayoutEffect — Runs Before Painting ⚡

• When it runs:
  Right after the DOM updates but before the browser paints the screen.

• Use it for:

  • Reading layout measurements (e.g., getBoundingClientRect).
  • Making DOM changes that must happen before the browser paints.
  • Avoiding layout shifts or flickers.

• Example:

  import { useLayoutEffect, useRef } from "react";
  
  function LayoutExample() {
  const divRef = useRef();
  
  useLayoutEffect(() => {
  const rect = divRef.current.getBoundingClientRect();
  console.log("Div size:", rect.width, rect.height);
  }, []);
  
  return <div ref={divRef}>Measure me! 📏</div>;
  }

• ⚡ Pros: Perfect for layout reads/writes.

• ⚠️ Cons: Can block painting and hurt performance if overused.

3️⃣ Quick Comparison Table: 📋

4️⃣ When to Use Which? 🧐

• Default to useEffect for most side effects.
• Use useLayoutEffect only when:
  • You need precise DOM measurements.
  • You’re preventing layout shifts or visual flickering.

💡 Pro Tip: If you’re not seeing visual glitches or layout issues, stick to useEffect—it’s better for performance. 🚀