This is very brittle and hard to maintain... it's likely something changes with the breakpoint, and nobody will know that this code needs to be updated.

Can this constant be defined somewhere and given a name, along with a comment that explains where it comes from (presumably some CSS file), and a comment in the CSS file indicating that the value must be kept in sync here?

We want to make sure that we use showMobileNav directly in the useEffect to ensure that the most current state value of showMobileNav is being used. 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. With this in mind we could change the effect to look like this

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

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

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

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.

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]);