reactjs unmounted components, viral

Question

I searched for all possible pages but I could not solve this problem. I also tried with some modules, with an abort controller and all other things but to this day I don't know what is the proper way and how to solve this problem about unmounted components. I am working with functional components. This is my code:

  const [visitorsNumber, setVisitorsNumber] = useState(0);
  const [loggedList, setLoggedList] = useState([]);

  const [mounted, setMounted] = useState(true);

  useEffect(() => {
    socket.open();
    socket.on('visiotrsnumber', (data) => {
       if (mounted === true) setVisitorsNumber(data)
    })
    socket.on('loggedlist', (data) => {
      if (mounted === true) setLoggedList(data)
    })

    return () => {
      socket.close();
      setMounted(false);
    }

  }, [loggedList, visitorsNumber]);

Can anyone explain to me why this error occurs and what is the solution to this?

Error log:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

When i delete this code i dont getting error.

Answer 1

The state can't be modified when component is unmounted. I don't see any reason to use setMounted(false) when component is unmounted, also the useEffect callback is called when component is mounted, so you don't need to check that, but if you need it to, you can use useRef instead:

const mounted = useRef(true);

useEffect(() => {
    socket.open();
    socket.on('visiotrsnumber', (data) => {
       if (mounted.current === true) setVisitorsNumber(data)
    })
    socket.on('loggedlist', (data) => {
      if (mounted.current === true) setLoggedList(data)
    })

    return () => {
      socket.close();
      mounted.current=false;
    }

  }, [loggedList, visitorsNumber]);