React useEffect не блокирует повторную визуализацию

Question

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

Я написал код ниже, но каждый раз, когда вызывается обратный вызов, компонент перерисовывается и переменная myArray установлена ​​в пустой массив, вместо того, чтобы заполняться всем содержимым, поступающим в обратном вызове.

Что я делаю неправильно? Какой подход я должен использовать?

// event emulation
function onEventEmulator(callback, interval = 1000) {
    setInterval(() => callback('content'), interval);
}

function PollingComponent(props) {
    const [myArray, setMyArray] = useState([]);
    useEffect(() => {
        onEventEmulator(content => {
            setMyArray([...myArray, content]);
        });
    }, []); // with or without passing the empty array as second param, result does not change.
    return <ul>
        <li>Callback</li>
        <li>{myArray.length}</li>
    </ul>;
}

Answer 1

Давайте попробуем это:

function onEventEmulator(callback, interval = 1000) {
  setInterval(() => callback("content"), interval);
}

А потом:

function PollingComponent(props) {
  const [myArray, setMyArray] = useState([]);

  useEffect(() => {
    onEventEmulator(content => {
      setMyArray(arr => [...arr, ...content]);
    });
  }, []);

  return (
    <ul>
      <li>Callback</li>
      <li>{myArray.length}</li>
    </ul>
  );
}

Одна вещь, которая здесь отсутствует, это способ очистки setInterval, но я думаю, что это не ваша беспокойство здесь.