0

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.

user15324999
  • 81
  • 8
  • The error occurs because you are using setMounted(false), the state can't be modified when component is unmounted – lissettdm Mar 18 '21 at 13:40
  • Can you please give me some example code or something? Just need the correct way to do this, this killing me from start... – user15324999 Mar 18 '21 at 13:46
  • Can you actually show the error trace and possibly modify the question title - it's vague. – Lakshya Thakur Mar 18 '21 at 13:46
  • 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. – user15324999 Mar 18 '21 at 13:49
  • Does this answer your question? [React-hooks. Can't perform a React state update on an unmounted component](https://stackoverflow.com/questions/56442582/react-hooks-cant-perform-a-react-state-update-on-an-unmounted-component) – Lakshya Thakur Mar 18 '21 at 13:52
  • The example from @lissettdm is working :) Thanks for help. – user15324999 Mar 18 '21 at 13:55

1 Answers1

0

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]);
lissettdm
  • 12,267
  • 1
  • 18
  • 39
  • This example is working for me, is this the best way to handle this error? Thanks 4 help :) – user15324999 Mar 18 '21 at 13:54
  • Yes, because you can't update the state when component is unmounted – lissettdm Mar 18 '21 at 13:55
  • Thanks very much 4 help:) – user15324999 Mar 18 '21 at 13:59
  • I still cant solve this problem brother, i updated my full code in comment and thanks for help – user15324999 Mar 22 '21 at 20:06
  • Are you using const mounted = useRef(true);?? because you can't update the state when component is unmounted – lissettdm Mar 22 '21 at 20:09
  • I post my full code up with fetches and everything, and i used your example but i still got this error on multiple pages so i need best solution for this so i can use it in feature.. And thanks alot for help. – user15324999 Mar 22 '21 at 20:12
  • any help for this> – user15324999 Mar 22 '21 at 21:17
  • Do you need to use mounted for some reasons? because it is an antipattern, check this: https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html, use it only if it is neccessary – lissettdm Mar 22 '21 at 21:33
  • I dont need , but i dont know how to solve this error with unmounted because when i start to switch fast pages in navigation i got error in multiple pages. Example if i got in users and fast when he didnt even load posts i change in posts i got error.. Any example u can give me with my code up? – user15324999 Mar 22 '21 at 21:42