Реагировать на вызовы не по порядку

Question

По какой-то причине кажется, что ловушка useMemo выполняется перед ловушкой useEffect, прямо над ней. Я считаю, что это так, потому что я получаю сообщение об ошибке:

TypeError: Невозможно прочитать свойство 'timestamp' из неопределенного

, эта ошибка указывает на datum.timestamp в массив зависимостей для последнего хука useEffect и возникает всякий раз, когда is_paused меняется с false => true.

Проблема, на мой взгляд, заключается в том, что хук useMemo пытается получить элемент из пустого массива, массива который должен был быть установлен useEffect перед ним.

Я сделал некоторые записи, и действительно, я вижу журнал в useMemo, но не useEffect.

const [position, setPosition] = useState(MAX_HISTORY - 1);
const [data, setData] = useState<ExData[]>(new Array(MAX_HISTORY).fill({ content: {} }));
const paused_data_ref = useRef<ExData[]>([]);

useEffect(() => {
  const listener = (d: ExData) => {
    const new_data = data.slice(1);
    new_data.push(d);
    setData(new_data);
  };
  addListener(props.event_key, listener);
  return () => {
    removeListener(props.event_key);
  };
});

useEffect(() => {
  paused_data_ref.current = is_paused ? [...data] : [];
  if (is_paused) {
    console.log('copy data array');
  }
}, [is_paused, data]);

const datum = useMemo(() => {
  if (is_paused)
    console.log({
      position,
      data: paused_data_ref.current[position],
      arr: paused_data_ref.current
    });
  return is_paused ? paused_data_ref.current[position] : data[MAX_HISTORY - 1];
}, [is_paused, position, data]);

useEffect(() => {...}, [datum.timestamp])

Answer 1

Вы правы, функция, переданная в useEffect, вызывается после функции, переданной в useMemo.

Согласно документам React:

Функция, переданная в useEffect будет запущен после фиксации рендера на экране.

Это означает, что все вызовы useEffect будут выполняться после других функций в вашем компоненте (включая функцию, переданную useMemo), даже если useEffect находится ранее в компоненте.

https://reactjs.org/docs/hooks-reference.html