How to clear timeout of self-restarting function on unmount?

Question

I am using a function that fetches a data from server to update a loading log table.

For this purpose I set a timeout for 15 second which is called inside the function. I need to clear this timeout on componentWillUnmount, because it modifies state and I don't need to mess with state of an unmounted component.

// LogTable is my component
const LogTable = () => {
  let timerId
  const getLoadingData = () => {
    //does something
    timerId = setTimeout(getLoadingData, 15000)
    //more code
  }

  useEffect(() => {
    return function cleanup() {
      clearTimeout(timerId)
    };
  }, []);
}

The code above doesn't work, because timerId inside the useEffect function is undefined and I don't know how to fix this.

We need to know what the scope of that `let timerId` is. Need to see some surrounding code - particularly where do you call `getLoadingData`? — Wyck, Aug 12 '19 at 15:02
try returning an arrow function `() => { clearInterval(timerId)}` — guijob, Aug 12 '19 at 15:02
Sidenote: You call `clearInterval` with `timerId` returned by `setTimeout` — hindmost, Aug 12 '19 at 15:03
See [Are clearTimeout and clearInterval the same?](https://stackoverflow.com/q/9913719/1563833) — Wyck, Aug 12 '19 at 15:05
I am sorry for `clearInterval`. In my actual code it was correctly written (`clearTimeout`), I just mistyped that — Washington Irving, Aug 12 '19 at 15:08

score 5 · Accepted Answer · answered Aug 12 '19 at 15:06

You should actually write it as:

  const useTimeout = (task, time) => useEffect(() => {
    const id = setTimeout(task, time)
    return () => clearTimeout(id);  
 }, []);

That can then be used as:

   useTimeout(10000, () => {
     // ... do whatever
   })

Or in your specific usecase:

  const useInterval = (task, time) => useEffect(() => {
    let id;
    (async function job() {
       await task();
       id = setTimeout(job, time);
    })();
    return () => id && clearTimeout(id);  
 }, []); 

 useInterval(1000, async () => {
   //...
 });

How to clear timeout of self-restarting function on unmount?

1 Answers1