If we put the showMobileNav in the callback we could run into the situation where the handleResize function created in a particular render will always refer to the showMobileNav value from that specific render, and this could be an outdated value.

Pretty sure you have the exact same problem in your current implementation? You're not declaring any refs, so my intuition tells me there can't be any difference in approaches. Your handleResize function is going to be bound with the value of showMobileNav at the time the effect was run.

This strongly smells like a core misunderstanding, not just about React but about how variables work in JavaScript.

However with this solution we may be removing an event listener even when it's added. Technically there is no harm/risk in doing so, but it is a bit strange and considered an antipattern.

I don't understand why you think you have to do that. Can't you just do this?

const handleResize = React.useCallback(() => {
  if (window.innerWidth > HEADER_BREAKPOINT) {
    setShowMobileNav(false);
  }
}, [setShowMobileNav]);

React.useEffect(() => {
  if (showMobileNav) {
    window.addEventListener('resize', handleResize);
    return undefined;
  }

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, [handleResize, showMobileNav]);