Example of a functional React component with useEffect and the AbortController to cancel an async operation

react-component-with-use-effect.tsx

// See https://gist.github.com/tjunghans/0129439ad12b37b98c72477156cddbce for the definition of `doSomethingAsync`.

function MyComponent({ someprop }) {
  const [value, setValue] = React.useState("");

  React.useEffect(() => {
    // Create an instance of the AbortController that will
    // be used to abort in the useEffect return.
    const controller = new AbortController();
    
    doSomethingAsync(someprop, {
      signal: controller.signal
    }).then((result) => {
      // setValue must not be called after the component is unmounted.
      // See https://medium.com/doctolib/react-stop-checking-if-your-component-is-mounted-3bb2568a4934.
      setValue(result);
    });

    return () => {
      controller.abort();
    };
  }, [someprop]);

  return (
    <div>
      MyComponent...
    </div>
  );
}