小道具を期待していない場合は、すべてのコンポーネントをReact.memo（）でラップする必要がありますか？

Question

Reactデフォルトですべての機能コンポーネントに対してReact.memoを実行しない理由は明らかですが、必要に応じて機能コンポーネントをラップする必要があります。

私の場合、次のような構造の大きな反応プロジェクトがあります。

const MyBigApp = () => {
  const shouldShowX = useSelector(getShouldShowX);
  const shouldShowY = useSelector(getShouldShowY);
  // Many more selectors

  return (
    <>
      {shouldShowX && <ComplexComponentX />}
      {shouldShowY && <ComplexComponentY />}
      {/* many more components based on different selectors like above */}
   </>
  );
};

私のビジネスロジックはすべてreduxの内部にあり、コンポーネントuseSelectorはストアからデータを取得するために内部的に使用します。

React.memoルートレベルでセレクターを変更するとアプリ全体が再レンダリングされるため、すべての子コンポーネントをでラップするのは理にかなっていますか？

以前は、connectカスタムの小道具を比較し、小道具としてコンポーネントに渡された値を保存するメモ化されたコンポーネントを自動的に取得していましたが、小道具を受け取らないコンポーネントで使用している間は、常に手動で行う必要がありますか？React.memouseSelector

Answer 1

React.memo小道具を受け入れない子コンポーネントの使用を検討する必要があると私は主張します。私はこの記事を強くお勧めします：https://dmitripavlutin.com/use-react-memo-wisely/

2.1コンポーネントが同じ小道具で頻繁にレンダリングされる
React.memo（）でコンポーネントをラップする最良のケースは、機能コンポーネントが頻繁に、通常は同じ小道具でレンダリングされることを期待する場合です。

あなたが求めているコンポーネントは小道具を受け入れないので、それは小道具が決して変わらないことを意味します。したがって、使用React.memo することでレンダリングサイクルを回避できるのは当然のことです。同じ記事からのこの重要な警告に注意してください：

5. React.memo（）はパフォーマンスヒントです
厳密に言えば、Reactはメモ化をパフォーマンスヒントとして使用します。

ほとんどの場合、Reactはメモ化されたコンポーネントのレンダリングを回避しますが、レンダリングを防ぐためにそれを当てにするべきではありません。