20 / 23

Write a useFetch hook with loading, error and abort on unmount or URL change.

MediumP2Coding

Write a useFetch(url) hook that loads JSON and reports the state of the request.

const { data, error, status } = useFetch(url);

Build a demo with a text input or buttons that change the URL, showing the three states. Use any public JSON API, or a function that fakes fetch with a delay.

Time box: 40 to 50 minutes.

Requirements

0 / 7

Returns { data, error, status }, where status is one of 'idle', 'loading', 'success', 'error'
Starts a request when url changes and sets status to 'loading' (and clears the previous error)
Aborts the in-flight request with an AbortController when the URL changes or the component unmounts
A response that arrives after its request was aborted never updates state (no stale data, no warning about unmounted updates)
An abort is not reported as an error; network failures and non-2xx responses are (check response.ok)
url of null or undefined means do nothing and stay 'idle'
The effect depends only on url, so re-renders do not refetch

Stretch goals

0 / 3

Only after every requirement works.

A refetch() function returned from the hook
A small cache keyed by URL so going back to a URL shows its data immediately, then revalidates
Type the hook with a generic useFetch<T>(url: string | null)

Hints

Workspace

Your files are saved in this browser as you type.

When every requirement works, mark it complete to count it as solved.

Solution notes

How a strong candidate structures it, and what interviewers check.

Your notesSaved automatically