async task with useReducer that is not a hook in react - reactjs

Question

I am really struggling to understand why there are so many use**Async hook libraries in react when hooks cannot be used in event handlers.
If I look at this code:
import { useEffect, useReducer } from 'react';
const initialState = {
started: false,
pending: true,
error: null,
result: null,
start: null,
abort: null,
};
const reducer = (state, action) => {
switch (action.type) {
case 'init':
return initialState;
case 'ready':
return {
...state,
start: action.start,
abort: action.abort,
};
case 'start':
if (state.started) return state; // to bail out just in case
return {
...state,
started: true,
};
case 'result':
if (!state.pending) return state; // to bail out just in case
return {
...state,
pending: false,
result: action.result,
};
case 'error':
if (!state.pending) return state; // to bail out just in case
return {
...state,
pending: false,
error: action.error,
};
default:
throw new Error(`unexpected action type: ${action.type}`);
}
};
export const useAsyncTask = (func) => {
const [state, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
let dispatchSafe = action => dispatch(action);
let abortController = null;
const start = async () => {
if (abortController) return;
abortController = new AbortController();
dispatchSafe({ type: 'start' });
try {
const result = await func(abortController);
dispatchSafe({ type: 'result', result });
} catch (e) {
dispatchSafe({ type: 'error', error: e });
}
};
const abort = () => {
if (abortController) {
abortController.abort();
}
};
dispatch({ type: 'ready', start, abort });
const cleanup = () => {
dispatchSafe = () => null; // avoid to dispatch after stopped
dispatch({ type: 'init' });
};
return cleanup;
}, [func]);
return state;
};
I really like that it has all the loading and error states returned but I cannot use this in an event handler.
Are there any options to use this in an event handler or how else can I get my loading and error states generically?
The README to the package I got the code from gives this example:
import React, { useState, useCallback } from 'react';
import {
useAsyncCombineSeq,
useAsyncRun,
useAsyncTaskDelay,
useAsyncTaskFetch,
} from 'react-hooks-async';
const Err = ({ error }) => <div>Error: {error.name} {error.message}</div>;
const Loading = ({ abort }) => <div>Loading...<button onClick={abort}>Abort</button></div>;
const GitHubSearch = ({ query }) => {
const url = `https://api.github.com/search/repositories?q=${query}`;
const delayTask = useAsyncTaskDelay(useCallback(() => 500, [query]));
const fetchTask = useAsyncTaskFetch(url);
const combinedTask = useAsyncCombineSeq(delayTask, fetchTask);
useAsyncRun(combinedTask);
if (delayTask.pending) return <div>Waiting...</div>;
if (fetchTask.error) return <Err error={fetchTask.error} />;
if (fetchTask.pending) return <Loading abort={fetchTask.abort} />;
if (!fetchTask.result) return <div>No result</div>;
return (
<ul>
{fetchTask.result.items.map(({ id, name, html_url }) => (
<li key={id}><a target="_blank" href={html_url}>{name}</a></li>
))}
</ul>
);
};
const App = () => {
const [query, setQuery] = useState('');
return (
<div>
Query:
<input value={query} onChange={e => setQuery(e.target.value)} />
{query && <GitHubSearch query={query} />}
</div>
);
};
This seems very inefficient, is there a better way?