React Warning: “Can’t perform a React state update on an unmounted component”

I fetch data inside a useEffect, but occasionally I see: vbnet Copy code Warning: Can't perform a React state update on an unmounted component. This is a no op, but it indicates a memory leak. This happens if the component unmounts before the fetch completes. How can I prevent this warning and avoid memory leaks?

is a no op, but it indicates a memory leak. This happens if the component unmounts before the fetch completes. How can I prevent this warning and avoid memory leaks? ✅ Answer / Explanation React issues this warning when an async operation (like a fetch) resolves after the component has unmounted and tries to update state. This often indicates a memory leak in your component lifecycle ([turn0search4] and Reddit discussions turn0reddit16turn0reddit20). Fix Options: • Flag-based cleanup using useRef: js Copy code useEffect(() => { const isMounted = { current: true }; fetchData().then(data => { if (isMounted.current) setState(data); }); return () => { isMounted.current = false }; }, []); • Use AbortController to cancel fetch: js Copy code useEffect(() => { const controller = new AbortController(); fetch(url, { signal: controller.signal }) .then(res => res.json()) .then(data => setState(data)) .catch(err => { if (err.name !== 'AbortError') console.error(err); }); return () => controller.abort(); }, []); • Use libraries like React Query or SWR, which handle cancellations and stale updates internally ([turn0search9]turn0search5). These methods prevent state updates on unmounted components and avoid memory leaks.