useNetFlux

While working on one a project; I came accross a problem where we had tabs to change the UI; and whenever you'd click on a tab, it would make a new network request to fetch and show new data of that respective tab. Now, if you do it slow enough, it would switch the tab and show a preloader while it fetched the data from the API.

But the problem arose if you click tabs quickly, and switched between them fast-enough. This lead to each click triggering an API call; and when the user finally stopped switching between the tabs - it lead to completion of each request one by one - which in turn lead to the data in the UI getting updated in sequence as each API request was resolving a successful response, one-by-one and updating the local response state as well.

This was obviously bad user experience, but more than that - it was bad handling of APIs itself. Now, one may suggest that I could simply debouce the API requests using setTimeout or use lodash debounce function to handle this, but I wanted more control over my API requests. I wanted an architecture in my API request process and control over the requests which would allow me to abort/cancel the previous on going APIrequest and instead make a new, updated API request.

There are libraries like TanStack Query, React Query, SWR etc. which provide control over the requests but I dont want to a library that requires me to "learn" it. All of these libraries come with a lot of features out of the box and I am not looking for that. I just want a simple solution to handle my API requests and have control over them.

So useNetFlux was born.