React
Challenge: useFetch hook
Write a useFetch hook that returns loading, error and data states.
Challenge: useFetch hook
In this challenge you write a useFetch hook. It takes a URL, fetches the data, and returns { data, error, loading }.
Hint: call fetch inside useEffect; keep loading and data in useState. On error, set error.
This challenge comes with few hints; combine what you have learned.
Exercise Write useFetch hook
Write a useFetch hook: take a url parameter, keep data (null), loading (true) and error (null) in useState. Inside useEffect, call fetch(url), parse JSON with .then(r => r.json()), set data with .then(setData), set error with .catch(setError), and set loading false with .finally(() => setLoading(false)). Return { data, loading, error } and export. The useEffect dependency array should be [url].
Show example solution
import { useState, useEffect } from "react";
export function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url)
.then((r) => r.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}
Test yourself
-
What should useFetch return?
- Only data
- Data, error and loading
- Only loading
- Only error
Show answer
Data, error and loading — { data, error, loading } are the hook's three states.
-
useFetch loading state
export function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(____);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url).then(r => r.json()).then(setData).finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}
Show answer
export function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url).then(r => r.json()).then(setData).finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}
Next lesson: Challenge: Theme provider
