What should I render while the Swiggy API is loading?
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.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Using the Swiggy API With useEffect: A Step-by-Step Example
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.
Still have questions?
Browse all our FAQs or reach out to our support team