Cancellable Async for React useEffect

import React from 'react';
import { fetchFn } from './myAsyncService'

export function cancellableEffect(asyncFunction, afterFunction) {
  let isCancelled = false;

  const runAsyncFunction = async () => {
    const data = await asyncFunction();

    if (isCancelled) {
      return;
    }

    afterFunction(data);
  };

  runAsyncFunction();

  return () => {
    isCancelled = true;
  }
}

function DynamicItemSelect(props) {
  const { onChangeItem, fetchFn, name } = props;
  const [ currentItem, setCurrentItem ] = React.useState(null);
  const [ items, setItems ] = React.useState(null);
  const [ loading, setLoading ] = React.useState(true);

  const updateItem = React.useCallback((item) => {
    setCurrentItem(item);
    onChangeItem(item);
  }, [ setCurrentItem, onChangeItem ]);

  const cancellableCallback = React.useCallback(
    () => cancellableEffect(
      async () => items || await fetchFn(),
      (result) => {
        setItems(result);
        updateItem(result[0]);

        setLoading(false);
      }),
    [ items, fetchFn, updateItem ],
  );

  React.useEffect(cancellableCallback);

  if (loading) {
    return <h1>Loading {name}(s)...</h1>;
  }
  
  return <h1>{name} {item}</h1>;
}