Как сделать повторяющуюся анимацию?

Question

[n1ksON]

Нужно сделать повторяющуюся с определённым промежутком смену стиля в блоке.
У меня есть массив с объектами в которых прописан стиль. Нужно в блоке менять стиль с определённой периодичностью.

Вот что у меня получилось:

import React, { useEffect, useState } from "react";

const Result = ({ properties, time }) => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    let timerId = setTimeout(
      () => (count < 2 ? setCount((prev) => ++prev) : setCount(0)), // count всегда меньше 3х
      `${time}000`
    );
  }, [count, time]);
  let styles = [];
  for (let i = 0; i < properties.length; i++) {
    styles.push({
      color: `${properties[i].color}`,
    });
  }
  return (
    <div>
      <div
        className="banner"
        style={styles[count]}
      />
    </div>
  );
};

export default Result;

Код работает, пока не изменятся properties или time. Тогда, как я понимаю, создаётся новый таймер и всё ломается.
Если я правильно понимаю, после изменения properties или time, нужно сбросить выполняющийся таймер, но как мне это сделать? Создать новый useEffect? Но как получить доступ к интервалу из уже имеющегося useEffect?

Comments

[WbICHA]

Мне день разбираться с основной проблемой, но тут ужасно написано:

let styles = [];
  for (let i = 0; i < properties.length; i++) {
    styles.push({
      color: `${properties[i].color}`,
    });
  }

// =>

const styles = properties.map((p) => ({ color: p.color }));

Answer 1

[0xD34F]

Но как получить доступ к интервалу из уже имеющегося useEffect?

очистка эффекта