何か1つを変更すると全ての要素が再レンダリングされている問題を解決する

[pss-aileen]

• FormItemが変更されている
  • ここはされなくて良いのでは？

パフォーマンスを測定しておいて、それが改善できているかを測りたいけどどうしたらいいんだろうか

とにかく、無駄なレンダリングを探して解消していきたい

[pss-aileen]

Reactでは、通常、親コンポーネント（あなたの例ではA）が再レンダリングされる条件として、親自身の状態やプロパティ（props）が変更された場合が考えられます。ただし、子コンポーネント（チャイルド）が変更されたときに親コンポーネントが再レンダリングされるかどうかは、その子コンポーネントがどのように組み込まれているかによります。

1. 親コンポーネントの再レンダリングが「普通」かどうか

   • 子コンポーネントが変更されたとき、親コンポーネントが必ず再レンダリングされるわけではありません。ただし、Reactの再レンダリングの仕組みでは、親が再レンダリングされると、その子も通常は再レンダリングされます。

   • 親Aが再レンダリングされるのは、Aのstateやpropsが更新された場合です。子コンポーネントが直接的にAに影響を与えるわけではない限り、子コンポーネントの変更だけで親が再レンダリングされることは「普通」ではありません。

2. チャイルドの中身だけ再レンダリングする方法
   親コンポーネントを再レンダリングせず、子コンポーネントだけを再レンダリングする方法としては、いくつかの手法があります：

   • React.memo() を使う
     React.memo() は、子コンポーネントに対して「メモ化」を適用し、propsに変更がない限り、その子コンポーネントを再レンダリングしないようにできます。

     const ChildComponent = React.memo(({ prop1, prop2 }) => {
       // チャイルドのコンテンツ
     });

   • useCallbackやuseMemo を使う
     親コンポーネントが再レンダリングされるたびに、関数や値が新しく生成されることがありますが、useCallbackやuseMemoを使ってこれらをメモ化することで不要な再レンダリングを防げます。

     const handleClick = useCallback(() => {
       // ハンドラーのロジック
     }, []);

   • keyの使用
     子コンポーネントにkeyを適切に設定することで、特定の子コンポーネントのみが再レンダリングされるようにできます。

まとめると、Reactのデフォルト動作では、親コンポーネントが再レンダリングされるとその子も再レンダリングされるのが普通ですが、React.memo() や useCallback などを使うことで、親を再レンダリングせずに子だけを再レンダリングすることが可能です。