🚀 New React Challenge: useEffect vs useLayoutEffect

You've used useEffect a thousand times. But did you know it runs after the browser paints? That means if you're measuring the DOM to position an element, users will see a flicker — the element renders at the wrong position, then snaps into place. useLayoutEffect fixes that by running before paint. This challenge proves it with a tooltip.

---

🧩 Overview

A tooltip component needs to center itself by measuring its own width. The starter uses useEffect, causing a visible flicker — the tooltip appears uncentered for a moment before snapping to the middle. Replace it with useLayoutEffect and the measurement happens before the browser paints, giving you a perfect first frame.

👉 https://www.reactchallenges.com/challenges/use-effect-vs-use-layout-effect

---

✅ Requirements

• Replace useEffect with useLayoutEffect in the TooltipContent component so the tooltip is centered before the browser paints, avoiding the flicker.

---

💡 Notes

• useLayoutEffect runs before paint — use it for DOM measurements.
• useEffect runs after paint — use it for logging, subscriptions, and side effects that don't affect layout.
• Pro tip: if the flicker is too fast to see, enable CPU throttling (4x or 6x) in DevTools → Performance tab.

---

🧪 Tests

1. Uses useLayoutEffect for the DOM measurement

---

This is one of those hooks that doesn't come up often — but when it does, knowing the difference between useEffect and useLayoutEffect is the difference between a polished UI and a janky one. A single line change, a world of difference.

🔥 Start the Challenge Now