How to fix Cannot update state on unmounted component. This is a no-op, but it indicates a memory leak in React

useEffect(() => {
  let isMounted = true;
  
  const fetchData = async () => {
    const data = await someAsyncOperation();
    if (isMounted) {
      setState(data);
    }
  };
  
  fetchData();
  
  return () => {
    isMounted = false;
  };
}, []);

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;
  
  fetch('/api/data', { signal })
    .then(response => response.json())
    .then(data => {
      if (!signal.aborted) {
        setData(data);
      }
    })
    .catch(error => {
      if (error.name !== 'AbortError') {
        console.error('Fetch error:', error);
      }
    });
  
  return () => {
    controller.abort();
  };
}, []);

useEffect(() => {
  const timerId = setTimeout(() => {
    setState('Timeout completed');
  }, 5000);
  
  const intervalId = setInterval(() => {
    setCount(prev => prev + 1);
  }, 1000);
  
  return () => {
    clearTimeout(timerId);
    clearInterval(intervalId);
  };
}, []);

useEffect(() => {
  const handleResize = () => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight
    });
  };
  
  window.addEventListener('resize', handleResize);
  
  // For RxJS subscriptions
  const subscription = someObservable$.subscribe(data => {
    setData(data);
  });
  
  return () => {
    window.removeEventListener('resize', handleResize);
    subscription.unsubscribe();
  };
}, []);

function MyComponent() {
  const isMountedRef = useRef(true);
  
  useEffect(() => {
    isMountedRef.current = true;
    
    someAsyncOperation().then(data => {
      if (isMountedRef.current) {
        setState(data);
      }
    });
    
    return () => {
      isMountedRef.current = false;
    };
  }, []);
  
  // ... rest of component
}