Chapter 5 API Integration React Interview Guide
Uploaded by
madhu swedhaChapter 5 API Integration React Interview Guide
Uploaded by
madhu swedhaChapter 5 - API Integration (React Interview Guide)
Fetch API
Native browser API for making HTTP requests. Uses fetch() and returns a Promise. Best for simple
projects. Remember to check [Link] because fetch doesn't reject HTTP errors like 404 or
500.
Interview Tip: Explain a real project scenario where you used this concept and mention one
common mistake.
Axios
Popular HTTP client with automatic JSON parsing, interceptors, request cancellation, timeout
support and easier error handling. Preferred in enterprise React applications.
Interview Tip: Explain a real project scenario where you used this concept and mention one
common mistake.
Error Handling
Wrap async calls with try/catch. Display meaningful error messages and avoid exposing raw server
errors. Handle network failures and unexpected responses gracefully.
Interview Tip: Explain a real project scenario where you used this concept and mention one
common mistake.
Loading States
Show loaders or skeleton screens while data is being fetched to improve user experience.
Example: isLoading state or React Query loading status.
Interview Tip: Explain a real project scenario where you used this concept and mention one
common mistake.
Retry Logic
Retry failed requests caused by temporary network issues. React Query supports configurable
automatic retries.
Interview Tip: Explain a real project scenario where you used this concept and mention one
common mistake.
Pagination
Load data page by page instead of requesting all records. Reduces payload size and improves
performance. Common in employee or product listings.
Interview Tip: Explain a real project scenario where you used this concept and mention one
common mistake.
Infinite Scroll
Automatically load the next page when the user reaches the bottom. Often implemented using
Intersection Observer or scroll events.
Interview Tip: Explain a real project scenario where you used this concept and mention one
common mistake.
AbortController
Cancels ongoing fetch requests when a component unmounts or a new request starts. Prevents
unnecessary updates and memory leaks.
Interview Tip: Explain a real project scenario where you used this concept and mention one
common mistake.
Race Conditions
When Request A starts before Request B but finishes later, stale data can overwrite newer data.
Prevent using AbortController, request IDs or React Query.
Interview Tip: Explain a real project scenario where you used this concept and mention one
common mistake.
Best Practices
• Keep API logic in a services folder.
• Use async/await with try/catch.
• Show loading and error UI.
• Cancel unnecessary requests using AbortController.
• Cache server state with React Query when appropriate.
• Avoid duplicate API calls and handle race conditions.