Reactアプリケーションでパフォーマンスを上げるためにとりあえずメモ化をしていたが、メモ化の前に見直すべきポイントがないか調べた
この時、dan氏のブログにまとまっていたので要点だけ自分でもまとめておく
見直し項目
- productionビルドを実行していることを確認する（developmentビルドになっていないか）
- ツリー内の必要以上に上位に状態を配置していないこと（例えば、入力状態をストアに置くのは最良のアイデアではない可能性がある）
- Move State Downを試みる Move State Down：state に依存している部分を state と一緒に別のコンポーネントに切り出す手法
- Lift Content Up を試みる Lift Content Up：遅いコンポーネントを children として state と一緒に切り出したコンポーネントに渡す手法
Move State Down と Lift Content Up は基本的なことのようだが、できていないコンポーネントがあるかもしれないので見直す
他参考
One simple trick to optimize React re-renders
https://zenn.dev/azukiazusa/articles/react-rerender-patterns
