Reactでmemoを使わないパフォーマンス改善テクニック

2022年1月10日

Reactの開発に携わっているDanのブログで書かれていた内容です。

このブログの例では、ExpensiveTreeという遅いコンポーネントが存在しています。

このコンポーネントのレンダー回数を最小にするためのテクニックが二つ書かれています。

一つ目は、stateを下層のコンポーネントに移すという方法です。

二つ目は、childrenを使う方法です。

目から鱗だったのは二つ目で、children として渡した場合は、そのコンポーネントはこのケースだとレンダーされないということです。

確かに言われてみればその通りだと思いましたが、今まで考えたことがなかったので勉強になりました。

かなりシンプルな内容にもかかわらず非常に勉強になりますし、サンプルも分かりやすいので、気になる人は原文の記事を読んでみると良いかもしれません。