毎回関数を作ってpropsに設定する問題の修正

Reactのよくある問題として、propsに関数を渡すパターンで毎回関数を作って渡してしまうが知られています。 毎回新しい関数を作ってしまうと、同じ異なる値(props)となるため無駄にコンポーネントが更新されてしまいます。

why-did-you-updateでもこの問題を検知できます。

この問題は、関数同士の比較は常にtrueとしてしまうshouldComponentUpdateを実装するか、一度作った関数をちゃんと使いまわす(constructorで作成やpublic fieldを使う)ことで解決できます。

また、ESLintやTSLintといったLintツールでも検知できます。

参考

修正

視聴ページにもいくつかのコンポーネントで同じような問題がありました。 tslint-reactを追加し、それらの問題を一個ずつ修正しました。

計測

why-did-you-updateを使って該当のコンポーネントの操作を行ったときに、無駄な更新ログがでないことが確認できました。

results matching ""

    No results matching ""