useFetch: React custom hook for Fetch API with Suspense and Concurrent Mode in Mind

Until we have react-cache or for a different purpose.

Introduction

While I don’t feel like coding React without hooks, react-cache still seems to be still far away. Surely, caching in data fetching important, nevertheless I would like to seek possibilities of implementations only with React Hooks. These might be obsoleted in the future, but I want something today, that is “useFetch”. This could be still useful without react-cache in case sophisticated caching is not necessary.

I’ve started developing “useFetch” as a tutorial to build a custom hook.

React Hooks Tutorial on Developing a Custom Hook for Data Fetching

Since then, the support for AbortController is added, which is incredible if you are fetching one-time-only data like typeahead suggest.

Now, to make this “useFetch” hook more usable, this article describes about supporting Suspense and also Concurrent React a bit.

React Suspense