React API Integration Interview Questions With Answers

React API Integration Interview Questions With Answers

API integration is core interview territory for React, since every real app fetches data. Here are the common questions.

How do you fetch data in React?

I fetch in useEffect with an empty dependency array for one-time fetches, or with the relevant dependencies when the fetch depends on values. I handle loading, error, and success states, and for real apps I use React Query for caching.

How do you handle loading and error states?

I track separate loading and error state. Show a spinner while loading, an error with a retry on failure, and set loading to false in a finally block. Never leave a blank screen.

What are race conditions and how do you avoid them?

If a user triggers multiple fetches, an earlier response can resolve after a later one, overwriting fresh data with stale. I avoid this with an AbortController that cancels outdated requests.

How do you avoid infinite loops in useEffect?

Use the correct dependency array. An empty array runs on mount. Including a state variable you update inside the effect causes a loop. The hooks lint plugin helps get this right.

What is the difference between fetch and axios?

Both make HTTP requests. fetch is built in and needs manual JSON parsing and error handling. axios has automatic JSON parsing, interceptors, and cleaner error handling. Either works; know the trade-offs.

How to Answer Well

Show you think about the full fetch lifecycle: loading, success, error, cleanup, and race conditions. Interviewers want engineers who handle failure, not just the happy path, and who use the right tools for the app's complexity.

The Takeaway

Know how to fetch, handle loading and error, avoid race conditions with abort signals, avoid infinite loops with correct dependency arrays, and choose between fetch and axios. Show you handle the full fetch lifecycle, not just the happy path.