Prevent "React state update on unmounted component" warning when setting state on async callback

I want to trigger an asynchronous operation from an event handler on a component and after that operation completes, update some UI state in that component. But the component may be removed from the DOM at any time, due to user navigating to another page. If that happens while the operation hasn't completed yet, React logs this warning:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Here's a reproducible example:

import { useState } from "react";
import ReactDOM from "react-dom";
// The router lib is a detail; just to simulate navigating away.
import { Link, Route, BrowserRouter } from "react-router-dom";

function ExampleButton() {
  const [submitting, setSubmitting] = useState(false);

  const handleClick = async () => {
    setSubmitting(true);
    await doStuff();
    setSubmitting(false);
  };

  return (
    <button onClick={handleClick} disabled={submitting}>
      {submitting ? "Submitting" : "Submit"}
    </button>
  );
}

function doStuff() {
  // Suppose this is a network request or some other async operation.
  return new Promise((resolve) => setTimeout(resolve, 2000));
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/other">Other</Link>
      </nav>
      <Route path="/" exact>
        Click the button and go to "Other" page
        <br />
        <ExampleButton />
      </Route>
      <Route path="/other">Nothing interesting here</Route>
    </BrowserRouter>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

You can see and run the example here. If you click the Submit button and then the "Other" link before 2 seconds pass, you should see the warning on the console.

Is there an idiomatic way or pattern for dealing with these scenarios where a state update is needed after an async operation?

What i've tried

My first attempt to fix this warning was to track whether the component has been unmounted or not using a mutable ref and a useEffect() hook:

function ExampleButton() {
  const [submitting, setSubmitting] = useState(false);
  const isMounted = useRef(true);

  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  const handleClick = async () => {
    setSubmitting(true);
    await doStuff();
    if (isMounted.current) setSubmitting(false);
  };

  return (
    <button onClick={handleClick} disabled={submitting}>
      {submitting ? "Submitting" : "Submit"}
    </button>
  );
}

Notice the conditional call to setSubmitting() after the doStuff() call.

This solution works, but i'm not too satisfied with it because:

• It's quite bolerplate-ish. All the manual isMounted tracking seems like a low-level detail, unrelated to what this component is trying to do, and not something i'd want to repeat on other places that need a similar async operation.
• Even if the boilerplate was hidden into a custom useIsMounted() hook, is seems that isMounted is an antipattern. Yes, the article is talking about the Component.prototype.isMounted method, which is not present on function components like the one i'm using here, but i'm basically emulating the same function with the isMounted ref.

Update: i've also seen the pattern of having a didCancel boolean variable inside the useEffect function, and using that to conditionally do stuff after the async function or not (because of an unmount or updated dependencies). I can see how this approach, or using a cancellable promise, would work nice in cases where the async operation is confined to a useEffect() and is triggered by component mount/update. But i cannot see how they would work in cases when the async operation is triggered on an event handler. The useEffect cleanup function should be able to see the didCancel variable, or the cancellable promise, so they would need to be lifted up to the component scope, making them virtually the same as the useRef approach mentioned above.

So i'm kind of lost on what to do here. Any help will be appreciated! :D