Передача функции стрелки компоненту, использующему хуки, вызывает повторное срабатывание useEffect

Question

Как передать функцию стрелки в качестве опоры компоненту, использующему зацепки, не вызывая useEffect, если не следует?

Codesandbox

function Apple(props) {
  const { text, cb } = props;
  useEffect(() => {
    pretendFetch().then(result => cb(result));
    // eslint-plugin-react-hooks dictates that `cb` should be within the dependencies array
  }, [cb]);
  return <div>{text}</div>;
}

Когда компоненту передается функция стрелки как cb, он запускает useEffect при каждом рендеринге. В идеале он должен просто использовать обратный вызов один раз, но я не могу просто передать [] в качестве массива зависимостей без выдачи предупреждением eslint-plugin-Reaction-hooks. Я читал, что useRef можно использовать для переноса обратного вызова, но это похоже на неудовлетворительную информацию об этой проблеме.

Answer 1

Проблема здесь в том, что функция обратного вызова воссоздается при каждом рендеринге и, следовательно, запускает обновление в useEffect. Вы можете изменить это поведение, используя хук useCallback, чтобы обернуть функцию обратного вызова в вышележащий компонент, как я делал в этом CodeSandbox

Answer 2

Сегодня я проверил эту проблему , с той же проблемой, что и у вас, поэтому я просто удалил cb из массива useEffect - чтобы запускать его только при монтировании - и отключил правило eslint react-hooks/exhaustive-deps .