How do I fetch data with useEffect correctly?
Declare state for data, loading, and error. Fetch inside useEffect with an empty dependency array, handle the response shape, and guard against unmount with a cleanup flag or abort signal. Handle all three states: loading, error, and success.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in How to Fetch Data With useEffect in React the Right Way
Use a cleanup flag that tracks whether the component is still mounted, or use an AbortController to actually cancel the request. Only update state if the component is still mounted, so you avoid the warning about updating state on an unmounted component.
Because you included a state variable in the dependency array that you update inside the effect. Each update triggers another fetch. Use an empty array for one-time fetches, or include only values the fetch actually depends on, like an id.
Yes, it is cleaner than a flag. Pass the controller's signal to fetch, and abort it in the cleanup function. This actually cancels the network request instead of just ignoring the result, which is better for performance and correctness.
Still have questions?
Browse all our FAQs or reach out to our support team