Альтернатива setInterval, который потребляет меньше ресурсов

Question

У меня есть компонент, который меняет изображения каждые 4 секунды, например:

state = {
  images: this.props.items,
  imageIndex: 0,
}
componentDidMount() {
  this.interval = setInterval(() => this.changeImage(), 4000)
}
changeImage = () => {
  const { imageIndex, images } = this.state
  if (imageIndex === images.length - 1) {
    this.setState({ imageIndex: 0 })
  } else {
    this.setState({ imageIndex: imageIndex + 1 })
  }
}
render() {
  const { images, imageIndex } = this.state
  return <img src={images[imageIndex]} />
}

Компонент используется в 6 местах на странице.

Проблема в том, что после парыминут вентилятор включается и компьютер прогревается.Я не знаю, вызвано ли это увеличением CPU использования или утечками памяти.

Существует ли какой-либо альтернативный метод setInterval (выполнение повторного задания через заданный интервал) при использовании меньшего количества ресурсов компьютера

Answer 1

Нет ничего плохого в использовании setInterval для этой цели.Но вы должны убедиться, что вы очищаете интервал, когда компонент отключен!Для этого есть функция clearInterval.Это вполне может быть источником ваших проблем с производительностью.

Поэтому я предлагаю что-то вроде этого:

componentWillUnmount() {
  clearInterval(this.interval);
}

Answer 2

Попробуйте с setTimeout :

function myFn() {
  setTimeout(myFn, 4000);
}
myFn();