Why is my React useEffect fetch running infinitely?
Because you forgot the empty dependency array. Without it, the effect runs on every render, and each fetch triggers another render, creating an infinite loop of requests. Use an empty array to fetch once on mount.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Common API Fetching Mistakes in React Projects
Because showing nothing while data loads makes the app feel broken. Track a loading flag and show a spinner or skeleton so the user knows something is happening and the UI feels responsive.
Use a cleanup function in useEffect or an abort signal to cancel stale requests. If a component unmounts while a fetch is in flight, setting state on it can warn or error, so cancel the request on cleanup.
Because you assumed the data is an array when it is actually nested inside an object. Read the actual response shape before rendering, and extract the array you need before calling map on it.
Still have questions?
Browse all our FAQs or reach out to our support team