React Strict Mode

When I built the navigation for this portfolio, I wanted smooth scrolling to sections. Simple, right? Wrong.

Every time I clicked a link, the page would scroll to the right section — and then immediately yank me down to the bottom. It was like the browser had a mind of its own.

The Ghost in the Machine

After hours of debugging, I realised what was happening. React 18's <StrictMode> was double-mounting my components in development. My scroll logic was firing twice — once on mount, and once on the forced remount.

Here's the code that was causing the issue:

const isMounted = useRef(false);

useEffect(() => {
  if (!isMounted.current) {
    isMounted.current = true;
    return; // Skip on first load
  }
  executeScroll();
}, []);

Because Strict Mode triggered a second mount, the scroll logic fired when it shouldn't have.

The Fix: Track State, Not Mounts Instead of tracking whether the component had mounted, I tracked whether the URL state had actually changed. I used useRef to compare the previous parameters with the current ones.

"The key is to know whether the user actually changed something, not whether the framework re-rendered something."

This video explains exactly why React 18's Strict Mode causes these issues and how to think about render cycles differently: