Integrating REST APIs in React is one of the most common tasks you will do as a frontend developer. This guide covers fetching data, handling loading states, managing errors, and using custom hooks.
Basic Fetch with useEffect
The simplest approach is using the fetch API inside a useEffect hook. Create a state for data, loading, and error. Set loading to true before the fetch and false after. Catch errors and store them in the error state.
Using Axios Instead of Fetch
Axios is cleaner than fetch — it automatically parses JSON, has better error handling, and supports request cancellation. Install with npm install axios and import it in your component.
Creating a Custom Hook
For reusable API logic, extract it into a custom hook named useFetch. Accept a URL parameter, return data, loading, and error, and call the hook in any component that needs it.
POST, PUT, DELETE Requests
For mutations, use axios.post, axios.put, or axios.delete inside event handlers. Pass the data as the second argument to post and put. Always update local state after successful mutation instead of refetching.
React Query for Advanced Cases
For complex applications, React Query handles caching, background refetching, pagination, and optimistic updates automatically. It dramatically reduces the amount of boilerplate you need to write.