When building a micro-frontend app, I ran into a deceptively simple requirement: after a user triggers an external redirect (OAuth, payment flow, etc.) and returns to the page, scroll back to the element they were interacting with. My first instinct was "just save the position and scroll back." That turned out to be wrong. The real insight: this is a timing problem, not a scroll problem . Three things must happen in sequence, each at the correct moment in the browser's rendering pipeline. Once I mapped this out, every technical decision fell into place. Part 1: The Map — Browser Event Loop Before any solution, let's build the map. One iteration of the browser event loop runs in four phases: Where each API lands in this loop: API Phase useEffect callback ① Macrotask MutationObserver callback ② Microtask (after DOM change, before render) requestAnimationFrame ③ Render phase (before Paint) setTimeout ④ Next macrotask (after render completes) Keep this table in mind — every decision below maps back to it.…