In this article, we take a use case to illustrate how it can be implemented in hooks. We don’t go deep in the library implementation, rather focus on the usage of it to understand how it is acceptable. The use case is so-called “typeahead search” where you have a textbox in which you can type, and as you type a search query, the search result is shown on the fly. There are three difficulties in this use case; a) we have to deal with async side effect in hooks, b) we need to abort a previous incomplete search which is no longer valid, and c) we want a delay before starting a search to reduce the number of network requests.

Hooks to handle async functions

Now, let’s look into hooks to handle abortable async functions. The first is a hook to create an async task.

const task = useAsyncTask(func, inputs);