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

#reactjs

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

Ответы

Ответ 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 
{props.children}
;
}


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


  Хук эффекта useEffect даёт вам возможность выполнять побочные
  эффекты в функциональном компоненте. Хук useEffect представляет собой
  совокупность методов componentDidMount, componentDidUpdate, и
  componentWillUnmount.
  
  useRef возвращает изменяемый ref-объект, свойство .current
  которого инициализируется переданным аргументом (initialValue).
  Возвращённый объект будет сохраняться в течение всего времени жизни
  компонента.
  
  Метод reduce() применяет функцию reducer к каждому элементу
  массива (слева-направо), возвращая одно результирующее значение.
  accumulator - значение, которое возвращает функция callback после
  посещения очередного элемента, либо значение initialValue, если оно
  предоставлено


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


Ответ 2

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

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