UseFetch Hook
The useFetch
hook is a custom hook in React that allows you to easily make HTTP requests and handle responses using the fetch
API. It's a convenient way to fetch data in your React components without the need to manually handle the Promise
returned by the fetch
call.
Basic Example
import { useState, useEffect } from 'react';
export function useFetch(url, options) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const res = await fetch(url, options);
const json = await res.json();
setData(json);
setLoading(false);
} catch (err) {
setError(err);
setLoading(false);
}
}
fetchData();
}, [url, options]);
return { data, loading, error };
}
For example:
function MyComponent() {
const { data, loading, error } = useFetch('https://my-json-api.com/posts');
if (loading) {
return <p>Loading...</p>;
}
if (error) {
return <p>An error occurred: {error.message}</p>;
}
return (
<ul>
{data.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
Making Different HTTP Requests
By default, the useFetch
hook makes a GET
request to the provided URL. However, you can make other HTTP requests by passing an options object as the second argument to the hook.
For example, to make a POST
request, you can pass an options object with the method
property set to 'POST'
:
const { data, loading, error } = useFetch(
'https://my-json-api.com/posts',
{
method: 'POST',
body: JSON.stringify({ title: 'My new post' }),
headers: {
'Content-Type': 'application/json'
}
}
);
You can also make PUT
, PATCH
, and DELETE
requests in a similar way by setting the method
property to the appropriate method.
Adding Query Parameters
To add query parameters to your request, you can use the URLSearchParams
API to build a query string and append it to the URL.
const params = new URLSearchParams();
params.append('sort', 'votes');
params.append('limit', '10');
const { data, loading, error } = useFetch(
`https://my-json-api.com/posts?${params.toString()}`
);
Handling HTTP Headers
You can set HTTP headers in the useFetch
hook by passing an options object with a headers
property. The headers
property should be an instance of the Headers
class or an object with keys and values representing the headers.
Here's an example of how to set the Content-Type
header in a POST
request:
const { data, loading, error } = useFetch(
'https://my-json-api.com/posts',
{
method: 'POST',
body: JSON.stringify({ title: 'My new post' }),
headers: {
'Content-Type': 'application/json'
}
}
);
You can also set multiple headers by adding more key-value pairs to the headers
object.
Handling HTTP Errors
If the HTTP request fails, the useFetch
hook will return an error
object with information about the failure. You can handle HTTP errors in your component by checking for the existence of the error
object and displaying an error message to the user.
For Example:
if (error) {
return <p>An error occurred: {error.message}</p>;
}
Adding Custom Logic
In addition to the basic functionality provided by the useFetch
hook, you can also add your own custom logic to the hook. For example, you might want to add a debouncing or throttling effect to your requests to prevent overloading the server with too many requests.
To add custom logic to the useFetch
hook, you can define your own hook that calls the useFetch
hook and adds your custom logic. Here's an example of how to define a custom hook that debounces the useFetch
hook:
import { useFetch, useState, useEffect } from 'react';
function useDebouncedFetch(url, options, delay) {
const [debouncedUrl, setDebouncedUrl] = useState(url);
const [debouncedOptions, setDebouncedOptions] = useState(options);
const { data, loading, error } = useFetch(debouncedUrl, debouncedOptions);
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedUrl(url);
setDebouncedOptions(options);
}, delay);
return () => clearTimeout(timer);
}, [url, options, delay]);
return { data, loading, error };
}
You can then use the custom useDebouncedFetch
hook in your component just like the useFetch
hook:
const { data, loading, error } = useDebouncedFetch(
'https://my-json-api.com/posts',
{ method: 'POST' },
1000
);
Summary
The useFetch
hook is a convenient way to fetch data in your React components without the need to manually handle the Promise
returned by the fetch
call. It allows you to make different HTTP requests, add query parameters and headers, and handle HTTP errors. You can also add custom logic to the hook to customize its behavior.