React: useEffect setInterval

имею довольно так стандартный useEffect

useEffect(() => {
    setInterval(() => {
       //fetch API
    },2000)
},[])

для определенного компонента обновляю данные с интервалом, понимаю, что, нужно уходить в другую сторону чтобы избавляться от подобного, возник как вопрос, как лучше сделать, чтобы интервал запускался только когда перешли на страницу с данным компонентом и соответственно останавливать когда ушли с нее, была идея отслеживать по url, возможно можно как то иначе?


Ответы (1 шт):

Автор решения: Blex

Жизненный цикл компонента

// вызывается после рендеринга компонента.
componentDidMount() {
  this.timer()
}

// Сам таймер
timer(){
    this.timerID = setInterval(
      () => //fetch API,
      2000
    );
}

// вызывается перед удалением компонента из DOM
componentWillUnmount() {
    clearInterval(this.timerID);//удаляем таймер 
}
→ Ссылка