How to Fetch Restaurant Data From an API in React
Fetching restaurant data from an API is a core React skill. Here is a step-by-step way to do it cleanly, including loading and error states.
How to Fetch Restaurant Data From an API in React
Fetching data from an API and rendering it is one of the most common things you do in React. Here is a clean, step-by-step way to fetch restaurant data.
Step 1: Create State for the Data
Use useState to hold the list of restaurants, a loading flag, and an error value. These three pieces of state cover the full lifecycle of a fetch.
Step 2: Fetch in useEffect
Inside useEffect with an empty dependency array, call the API endpoint. This runs the fetch once when the component mounts.
Step 3: Handle the Response
Check if the response is ok, parse the JSON, and store the data in state. If something fails, set the error state so you can show a message.
Step 4: Set Loading to False
Whether the fetch succeeds or fails, set loading to false in a finally block so the UI always stops showing the spinner.
Step 5: Render Based on State
If loading, show a spinner. If error, show an error message. Otherwise, map the restaurants into cards. This conditional rendering is what makes the UI feel real.
Step 6: Use Keys
Every restaurant card rendered from the list needs a stable unique key, usually the restaurant id, so React updates the list efficiently.
The Common Mistake
Beginners forget to handle loading or errors, so the UI shows nothing or crashes when the API fails. Always handle all three states: loading, error, and success.
The Takeaway
Fetching data is: state for data, loading, and error; fetch in useEffect; handle response and errors; render based on state with proper keys. Get this pattern down and you can build most data-driven UIs.
Create state for the data, a loading flag, and an error. Fetch inside useEffect with an empty dependency array, parse the response, store the data in state, and set loading to false in a finally block. Render based on the three states.
Because fetching is a side effect, and useEffect is where side effects belong in React. With an empty dependency array, the fetch runs once when the component mounts, which is usually what you want for initial data loading.
Three: loading, error, and success. Show a spinner while loading, an error message if the fetch fails, and the data once it arrives. Skipping any of these leads to a UI that looks broken when things go wrong.
Check if the response is ok, and wrap the fetch in try/catch. On failure, set an error state and render an error message. Always set loading to false in a finally block so the spinner stops even on failure.
So React can track which items changed across re-renders. Use a stable unique id from the data, like the restaurant id, as the key. This keeps list updates efficient and avoids subtle bugs.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.