A few weeks ago, while working on a React component, I ran into a small but annoying issue. I needed to track whether a component had mounted or not. My first thought was simple: just use useState.

It worked… but not quite the way I expected. My component was re-rendering twice on mount. At first, I ignored it. But the more I looked, the more I realized how unnecessary it was. If one flag could cause an extra render, what would happen in a larger app with dozens of components?

That’s when I decided to try a different approach with useRef.

My First Attempt with useState

Here’s the code I started with:

const [mounted, setMounted] = useState(false);

useEffect(() => {
  if (!mounted) {
    setMounted(true); // causes extra render
    return;
  }
  console.log("Effect runs just on updates");
}, [mounted]);

What actually happens here?

What actually happens here?

On the first render, mounted is false.
The effect runs, updates state to true.
React re-renders the component just to flip the flag.

Technically it works, but that second render doesn’t serve any real purpose. It’s extra work.

Technically it works, but that second render doesn’t serve any real purpose. It’s extra work.

The Cleaner Fix with useRef

Here’s the updated version:

const didMount = useRef(false);

useEffect(() => {
  if (!didMount.current) {
    didMount.current = true; // no re-render
    return;
  }
  console.log("Effect runs on updates ?");
}, []);

The difference is subtle but powerful. With useRef:

The value persists across renders.
Updating didMount.current does not trigger another render.
The flag is set once, and then the effect works exactly as intended.

That sneaky second render? Gone.

When Should You Use useState vs useRef?

After this, I started thinking about a simple rule of thumb:

Use useState when your value should update the UI.
Use useRef when your value is just internal bookkeeping and doesn’t need to re-render the component.

A good way to imagine it:

useState is like putting up a sticky note on your desk. Every time you change it, everyone in the office sees it.
useRef is more like keeping a note in your pocket. You can check it or update it whenever you want, but nobody else notices.

A Real-World Example

This comes in handy when you want to skip the first API call on mount but still run it on updates:

const didMount = useRef(false);

useEffect(() => {
  if (!didMount.current) {
    didMount.current = true;
    return;
  }

  fetchData(); // runs only when dependencies change
}, [dependency]);

With useRef, you avoid an unnecessary API call during the first render while still reacting to updates.

Key Takeaways

useState is great when you want the UI to react to state changes.
useRef is perfect for storing values between renders without triggering UI updates.
For component mount tracking, useRef is more efficient because it avoids extra re-renders.

Final Thoughts

This might seem like a tiny optimization, but in React, even small performance improvements add up. I first noticed this while debugging my own code, and switching from useState to useRef not only solved the problem but made the logic feel cleaner.

So if you ever need to track whether a component has mounted, remember:
✅ Use useRef instead of useState.

It’s one of those lessons you only need to learn once, and then it sticks.

React useState vs useRef: How I Fixed an Extra Render Bug While Tracking Component Mount