React: Using ref value in useEffect cleanup function

[WilsonCWong]

I'm currently trying to use the cleanup function of useEffect to remove any setTimeouts remaining to ensure it doesn't run when the component unmounts.

  const timers = useRef([]);

  useEffect(() => {
    return () => {
      for (let i = 0; i < timers.current.length; i++) {
        clearTimeout(timers.current[i]);
      }
    }
  }, [])

It works, but I get a warning that says

The ref value 'timers.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'timers.current' to a variable inside the effect, and use that variable in the cleanup function.

I'm wondering, is this something I should be concerned about? The ref value is only used during cleanup and it's not linked to any rendering.

Also, out of curiosity, what is this warning for exactly? I'm not quite sure I get it. Is it because if the ref is referring to a component, that component could be changed by the time the effect cleanup function runs?

[kunukn]

I'm wondering, is this something I should be concerned about? The ref value is only used during cleanup and it's not linked to any rendering.

I wouldn't be concerned about this, if the timers.current doesn't relate to DOM elements.

Also, out of curiosity, what is this warning for exactly? I'm not quite sure I get it. Is it because if the ref is referring to a component, that component could be changed by the time the effect cleanup function runs?

I believe that is correct.

If you read the console.logs from this example you would notice the difference
https://codesandbox.io/s/react-useeffect-useref-warning-407fj

The first useEffect ignores the hooks warning and on unmount, it logs null
The second useEffect does a variable copy

I can't see the full code you are using. I am uncertain whether using useRef would be needed for your case.

[ZooTopiaGG]

I'm wondering, is this something I should be concerned about? The ref value is only used during cleanup and it's not linked to any rendering.

I wouldn't be concerned about this, if the timers.current doesn't relate to DOM elements.

Also, out of curiosity, what is this warning for exactly? I'm not quite sure I get it. Is it because if the ref is referring to a component, that component could be changed by the time the effect cleanup function runs?

I believe that is correct.

If you read the console.logs from this example you would notice the difference
https://codesandbox.io/s/react-useeffect-useref-warning-407fj

The first useEffect ignores the hooks warning and on unmount, it logs null
The second useEffect does a variable copy

I can't see the full code you are using. I am uncertain whether using useRef would be needed for your case.

Perfect

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.