> ## Content Index
> Fetch the complete content index at: https://reactpractice.dev/llms.txt
> Use this file to discover other available public pages before exploring further.
# Build a custom useFetch hook
- URL: https://reactpractice.dev/exercise/build-a-custom-usefetch-hook/
- Published: 2025-02-20T11:30:41.000Z
- Updated: 2026-06-01T01:57:10.000Z
- Author: Corina Udrescu
- Tags: Custom hooks, #corina-2, Exercises, Interviews, Leetcode React, #Import 2026-06-09 12:07
Build a custom `useFetch` hook that encapsulates the logic for handling the **loading** and **error** states when fetching data:
```
const { data, isLoading, error } = useFetch(SOME_URL, MAYBE_OPTIONS);
```
The code should
- return the response from the server
- handle error and loading states
- support custom headers through an options parameter
- support all HTTP methods - e.g. both GET and POST requests
Use **Typescript** to build your solution.
Here is a sample `PokemonList` component that uses the hook:
```
import { useFetch } from "./use-fetch";
type Pokemon = {
name: string;
};
const PokemonList = () => {
const { data, isLoading, error } = useFetch<{ results: Pokemon[] }>(
`https://pokeapi.co/api/v2/pokemon?${new URLSearchParams({
limit: "10",
offset: "0",
})}`
);
const pokemons = data?.results || [];
if (isLoading) {
return Loading ...
;
}
if (error) {
return {error}
;
}
return (
{pokemons.map((pokemon) => (
- {pokemon.name}
))}
);
};
export default PokemonList;
```
To help you get started, the [starter repo](https://github.com/reactpractice-dev/use-fetch-hook?ref=reactpractice.dev) includes failing unit tests for both the `useFetch` hook and the `PokemonList` component.
[GitHub - reactpractice-dev/use-fetch-hookContribute to reactpractice-dev/use-fetch-hook development by creating an account on GitHub.GitHubreactpractice-dev](https://github.com/reactpractice-dev/use-fetch-hook?ref=reactpractice.dev)
💡
Ready to check your work?
[Become a member](https://reactpractice.dev/become-a-member/) and get access to the [official solution](https://reactpractice.dev/solution/tutorial-build-a-custom-usefetch-hook/) and the comments section for feedback and discussion.
