fetchData.jsx

  React.useEffect(() => {
    setLoading(true);

    const source = axios.CancelToken.source();

    async function fetchData() {
      try {
        // Get all the Category content areas & topics
        const dataAccess = new DataAccess.Client(props.user);

        const categories = await dataAccess.getCategoryContentAreas(source.token);

        // ... set state 
        
        // Get the resource
        const resource = await dataAccess.getResource(query.get("id") as string, source.token);
        
        // ... set state
      } catch (ex) {
        if (axios.isCancel(ex)) {
          console.log("request cancelled");
        } else {
          const error = ex as AxiosError;
          ExceptionService.StandardErrorHandler(error.response as AxiosResponse, enqueueSnackbar);
        }
      } finally {
        setLoading(false);
      }
    }

    fetchData();

    return function cleanup() {
      source.cancel();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);