Как правильно очистить один из таймаутов?

Question

[JeyFom]

Есть код вида:

componentDidMount() {
  this.foo = () = {

    //some code

    setTimeout(func, 1);
  };
};

componentWillUnmount() {
  setTimeout(func, 1);

  //some code

  this.foo();
}

Как правильно очистить один из таймаутов, чтобы они не стакались, при этом оба раза функция была вызвана по прошествии интервала?
Если делаю так,

componentWillUnmount() {
  const timeout = setTimeout(func, 1);

  //some code

  clearTimeout(timeout);
  this.foo();
}

то таймаут очищается до того, как должна быть вызвана функция

Answer 1

[Владимир]

Пример слишком синтетический.
componentWillUnmount как и componentDidMount гарантированно вызываются один раз.
Функция this.foo вызывается в componentWillUnmount без условий. Какой смысл разносить реализацию и выполнение? Скажи какую задачу решить пытаешся, тогда не прийдется костыли писать

componentDidMount() {
  this.foo = (timerToClear) = {

    //some code
    if (timerToClear) {
      clearTimeout(timerToClear);
    }
    setTimeout(func, 1);
  };
};

componentWillUnmount() {
  const timer = setTimeout(func, 1);

  //some code

  this.foo(timer);
}

Более реальный пример, когда ты садишь таймер на изменение стейта, но это красивее реализуется на хуке useEffect с очисткой
https://reactjs.org/docs/hooks-effect.html#effects...