Using the Swiggy API With useEffect: A Step-by-Step Example
A concrete example of fetching the Swiggy Dummy Data API with useEffect, handling all the states cleanly.
Using the Swiggy API With useEffect: A Step-by-Step Example
useEffect is where you fetch the Swiggy Dummy Data API. Here is a concrete, step-by-step example that handles all the states cleanly.
Step 1: Declare State
Declare state for the restaurant list, a loading flag, and an error. These hold everything the UI needs to render correctly during and after the fetch.
Step 2: Write the Fetch in useEffect
Inside useEffect with an empty dependency array, define an async function that calls the Swiggy API endpoint. Call it immediately so it runs on mount.
Step 3: Set Loading True First
Set loading to true before the fetch starts. This shows the spinner immediately while the request is in flight.
Step 4: Parse and Store the Data
Check that the response is ok, parse the JSON, extract the restaurant array from the response shape, and store it in state.
Step 5: Handle Errors
Wrap the fetch in try/catch. On failure, set the error state so the UI can show a message instead of crashing.
Step 6: Use a Cleanup Flag
Declare a flag that tracks whether the component is still mounted. In the cleanup function, set it to false, and only update state if it is still true. This avoids updating state after unmount.
Step 7: Render Based on State
If loading, show a skeleton. If error, show a retry. Otherwise, map the restaurants into cards with stable keys.
The Takeaway
Fetching the Swiggy API in useEffect means: declare state, fetch on mount with an empty dependency array, handle loading and error, guard against unmount with a cleanup flag, and render based on state. That is the clean pattern.
Declare state for data, loading, and error. Inside useEffect with an empty dependency array, define an async function that calls the endpoint, parse the response, store the data, and handle errors. Call the function immediately so it runs on mount.
So the effect runs only once when the component mounts. Without a dependency array, it runs on every render, causing an infinite loop of fetches. The empty array signals that the effect has no dependencies and should run once.
Use a cleanup flag. Declare a variable that tracks whether the component is still mounted, set it to false in the cleanup function, and only update state if it is still true. This avoids the warning about updating state on an unmounted component.
Read the actual response before rendering. The data is often nested inside an object, so extract the restaurant array from the correct field before calling map on it. Assuming it is a top-level array causes 'map is not a function' errors.
A skeleton or spinner that matches the final layout. This tells the user something is happening and prevents a blank screen. Once loading is false, render the restaurant cards with stable unique keys.
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.