☰

Reactコンポーネントが再レンダリングされる理由をトレースする 質問する

tag-icon • tag-icon reactjs redux
Reactコンポーネントが再レンダリングされる理由をトレースする 質問する

React でコンポーネントが再レンダリングされる原因をデバッグするための体系的なアプローチはありますか? レンダリング回数を確認するために簡単な console.log() を設定しましたが、コンポーネントが複数回 (私の場合は 4 回) レンダリングされる原因を突き止めるのに苦労しています。タイムラインやすべてのコンポーネント ツリーのレンダリングと順序を表示するツールはありますか?

ベストアンサー1

外部依存のない短いスニペットが必要な場合は、これが便利です

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

これは関数コンポーネントの更新を追跡するために使用する小さなフックです

function useTraceUpdate(props) {
  const prev = useRef(props);
  useEffect(() => {
    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
      if (prev.current[k] !== v) {
        ps[k] = [prev.current[k], v];
      }
      return ps;
    }, {});
    if (Object.keys(changedProps).length > 0) {
      console.log('Changed props:', changedProps);
    }
    prev.current = props;
  });
}

// Usage
function MyComponent(props) {
  useTraceUpdate(props);
  return <div>{props.children}</div>;
}

おすすめ記事