業務アプリでフロントを実装しているときに、フロントエンドエンジニアの方に色々教わり、学びがあったのでこれをネタにしたいと思いますどういうことをやろうとしていたのかこのように3階層のチェックリストのモーダルを作ろうとしていました。合計2,000近いコンテンツになりました。これを実装するにあたり、躓いた事・解決方法をまとめておきます学んだことAccordionのコンテンツ数が多くてレンダリングが遅くなるこれはMUIのドキュメントにも書かれているんですが、Accordionに渡されたコンテンツはサーバー側のレンダリングとSEOを考慮して、デフォルトでは全てマウントしてレンダリングされてしまいます。そのため、項目数が多いコンテンツはそのレンダリングに数〜数十秒かかります。ドキュメントに書かれていました。Accordionを展開するタイミングで、その配下の階層がレンダリングされるように次の記述を行うことで解消することができます。</AccordionDetails></Accordion>このとき、チェックボックスのonClickの判定領域とAccordionのexpandedの判定領域が重なっているため、両方発火してチェックが付くのと同時にAccordionが閉じたり開いたりという事象が発生しました。親コンポーネント(Accordion)にイベントが伝搬しないようにすることで解決することを教わりました。e.stopPropagation()}/>おまけ今作っている業務アプリを通して、フロントエンドエンジニアの方にReactのFormにはControlledとUncontrolledがあることを教わりました。https://zenn.dev/tns_00/articles/react-controlled-and-uncontrolledhttps://qiita.com/kotarella1110/items/da32add730e2b5451704react-hook-formはUncontrolledを採用しているそうです。Uncontrolledが切り替わってしまい、エラーが出て悩まされる日々です。今回の事とこのFormの仕様などを新たに知って、フロントは奥が深いなと痛感しました。趣味ではRustを勉強中バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。