Как проверить откуда было обновлено состояние?

Question

Написал код, который должен обновить состояние 1 раз, но где-то что-то обновляет его ещё раз сразу же после первого раза. Можно ли как-то получить Stack-Trace при обновлении состояния в React, чтобы посмотреть, что его обновляет?

Answer 1

Если вы хотите узнать краткий фрагмент без каких-либо внешних зависимостей, то можно пойти простым путём, через метод componentDidUpdate вывести информацию:

componentDidUpdate(prevProps, prevState) {
  Object.entries(this.props).forEach(([key, val]) =>
    prevProps[key] !== val && console.log(`Prop '${key}' changed`)
  );
  Object.entries(this.state).forEach(([key, val]) =>
    prevState[key] !== val && console.log(`State '${key}' changed`)
  );
}

componentDidUpdate() - вызывается сразу после обновления. Не вызывается при первом рендере. Метод позволяет работать с DOM при обновлении компонента.

Еще можно заюзать небольшой хук, для отслеживания обновлений функций компонентов:

function useTraceUpdate(props) {
  const prev = useRef(props);
  useEffect(() => {
    const changedProps = Object.entries(props).reduce((accumulator, [key, value]) => {
      // если значение изменилось - вернем его в результирующем объекте
      if (prev.current[key] !== value) {
        accumulator[key] = [prev.current[key], value];
      }
      return accumulator;
    }, {});
    if (Object.keys(changedProps).length > 0) {
      console.log('Changed props:', changedProps);
    }
    prev.current = props;
  });
}

// Использование
function MyComponent(props) {
  useTraceUpdate(props);
  return <div>{props.children}</div>;
}

Дополнения к коду:

Хук эффекта useEffect даёт вам возможность выполнять побочные эффекты в функциональном компоненте. Хук useEffect представляет собой совокупность методов componentDidMount, componentDidUpdate, и componentWillUnmount.

useRef возвращает изменяемый ref-объект, свойство .current которого инициализируется переданным аргументом (initialValue). Возвращённый объект будет сохраняться в течение всего времени жизни компонента.

Метод reduce() применяет функцию reducer к каждому элементу массива (слева-направо), возвращая одно результирующее значение. accumulator - значение, которое возвращает функция callback после посещения очередного элемента, либо значение initialValue, если оно предоставлено

Ссылка на источник: Trace why a React component is re-rendering. Думаю, что этого будет достаточно, чтобы отследить изменения. Также, можно поставить брэйкпоинт (debugger;) и посмотреть по стэку вызовов в браузере, откуда растут ноги.

Answer 2

Вот набор библиотек/компонентов/техник, которые решают вашу проблему https://github.com/markerikson/redux-ecosystem-links/blob/master/devtools.md#component-update-monitoring

Особо выделю https://github.com/reactopt/reactopt