Fetching Data

Loading data is a side effect. You need loading, success, and error states.

Here is a careful pattern with useEffect and a ignore flag so a slow response cannot overwrite a newer one.

The full picture

Why ignore

If id changes from 1 to 2, two fetches may be in flight.

The cleanup sets ignore on the old effect. When that old response lands, it does not call setState.

Where to put the URL

id is a prop. The effect depends on id. When the parent asks for another fox, you refetch.

Libraries

Later you may use React Query or SWR. They handle cache, retries, and ignore for you.

Learn this pattern first so those tools are not magic.

Tip: Always show loading and error. A blank screen looks like a broken app.