3 ways to fix Memory Leaks in React web application

react-memory-leaks.js

// 1) Using Boolean flag:

const [value, setValue] = useState('');
useEffect(() => {
  let isMounted = true;
  fetchValue().then(() => {
    if (isMounted) {
      setValue('done!'); // no more error
    }
  });
  return () => {
    isMounted = false;
  };
}, []);

// 2) Using AbortController:

useEffect(() => {
  let abortController = new AbortController();
  // your async action is here  
  return () => {
    abortController.abort();
  }
}, []);

// 3) Using use-state-if-mounted Hook:
//    ### Download it here: https://www.npmjs.com/package/use-state-if-mounted

const [value, setValue] = useStateIfMounted('checking value...');
useEffect(() => {
  fetchValue().then(() => {
    setValue("done!"); // no more error
  });
}, []);