[Example] Request API hook
March 26, 2022
This sample hook will send a request to an API:
- Use Fetch API
- Able to abort the request
- Handle result and error data
// Hook
import { useState, useEffect } from 'react'
const useUsers = () => {
const [users, setUsers] = useState();
const [error, setError] = useState();
useEffect(() => {
const controller = new AbortController();
const { signal } = controller;
fetch('/api/users', { signal })
.then((response) => response.json())
.then((usersFromApi) => setUsers(userFromApi))
.catch((apiError) => setError(apiError))
return () => controller.abort();
}, []);
return [error, users];
}
// Usage
const Users = () => {
const [error, users] = useUsers();
if (!users) {
return <p>Starting request ...</p>;
}
if (error) {
return <p>There has been an error: {error.message}</p>;
}
return <p>Received {users.length} users</p>;
}