useFetch
A React hook that provides data fetching behavior.
Installation
Install it with npm:
npm install use-fetch-hook
or with yarn:
yarn add use-fetch-hook
Example usage
;; const url = "https://jsonplaceholder.typicode.com/todos/1"; { const delay setDelay = ; const value isLoading error = ; if isLoading return <p>Loading...</p>; if error return <p>error</p>; return <> <p>valuetitle</p> <button onClick= >Increase delay</button> <button onClick= >Decrease delay</button> <button onClick= >Pause requests</button> </> ;}
What you can do with useFetch
- Render a loading screen or an error message depending on the state of a request.
- Dynamically specify a delay in milliseconds between requests. Internally, it uses another hook,
useInterval
, the code for which is taken from this post. - Specify a custom function that performs a request (e.g.
axios.get
). Unless otherwise specified,fetch
is used. - Specify a custom function that parses a response. Unless otherwise specified,
Body.json()
is used. - Provide an options object like
{ method: "POST" }
.
Note that a new request is made when the URL changes.
However, if requests are not scheduled with delay
and URL does not change, you must manually update data by using requestData
.
Syntax
useFetch takes a single object with the following arguments:
url
: a URL that is used to perform a requestoptions
(optional) : an options object (undefined
by default)delay
(optional) : a delay in milliseconds between requests (undefined
by default, meaning only one request is made per URL)fetchFn
(optional) : a custom function that performs a request (window.fetch
by default)parseFn
(optional) : a custom function that takes a response returned byfetchFn
and parses it
It returns an object with the following properties:
value
: a parsed response (null
by default)isLoading
: a Boolean value that represents whether a request is pending (true
by default)error
: an error returned by a fetch function (null
by default)requestData
: a function that performs the request (for forced/unscheduled updates)