Data Fetching

Most real apps need to load data from an API. The basic React pattern is fetch inside useEffect with three state variables: loading, error, and data. You show different UI depending on which state you're in.

The fetch lives inside useEffect with the right dependency array so it doesn't run on every render. If you're fetching based on a prop (like a userId), add that prop to the dependency array — the fetch re-runs whenever it changes.

Always handle the three cases: while loading, show a spinner or placeholder. If something went wrong, show the error clearly. Only render the real data when it's actually there — otherwise you'll get crashes from trying to access properties on null.

For production apps, consider a library like TanStack Query (React Query) that handles caching, refetching, and deduplication for you. The manual pattern here is the foundation — understanding it makes those tools much easier.