API Integration Questions Asked in React Frontend Interviews

API Integration Questions Asked in React Frontend Interviews

Almost every React interview covers API integration because every real app fetches data. Here are the common questions and how to answer them well.

How do you fetch data in React?

Fetch inside useEffect with an empty dependency array, store the result in state, and handle loading and error. This is the basic, correct answer.

How do you handle loading and error states?

Track separate loading and error state variables. Show a spinner while loading, an error message with a retry on failure, and set loading to false in a finally block.

What are race conditions in fetching and how do you avoid them?

If a user triggers multiple fetches, an earlier response might resolve after a later one, overwriting fresh data. Avoid this with cleanup flags or abort signals that ignore outdated responses.

How do you avoid infinite loops in useEffect?

Use the correct dependency array. An empty array runs once on mount. Including state you set inside the effect causes infinite loops. Only include values the effect actually depends on.

What is the difference between fetch and axios?

Both make HTTP requests. fetch is built into the browser and needs manual JSON parsing and error handling. axios is a library with automatic JSON parsing, interceptors, and cleaner error handling. Either is fine; know the trade-offs.

How to Answer Well

Show you think about the full lifecycle: loading, success, error, cleanup, and race conditions. Interviewers want engineers who handle failure, not just the happy path.

The Takeaway

API questions test whether you handle the full fetch lifecycle. Know how to fetch, handle loading and error, avoid race conditions, avoid infinite loops, and choose between fetch and axios.