要旨
React v16.5から入ったReact Profilerをちょろっと試してみました。
ざっくりとした説明
- React DevToolsにProfilerタブが追加された
- プロファイリングを開始すると、コンポーネントがレンダリングされるたびに情報を収集する
- プロファイリングを停止すると、コミットごとにレンダリング時間、props、stateを表示してくれる
- interactionとコミットを紐付けて可視化することもできる
前提条件
- React v16.5.0+
- React Developer Tools v3.3.2+
動作
- 同期カウンター
- 非同期カウンター
- レンダリング速度が遅くなるとき
の3つの例を確認できるデモを作ってみました。
同期カウンター/非同期カウンター
プロファイリングしながら、同期カウンター/非同期カウンターをそれぞれ押してみます。
2つのコミットが記録されてますね！
interactionを確認してみると、
同期と非同期のボタンを押した時にそれぞれ記録されています！
非同期のほうは2秒タイムアウトを入れてるので、そのぶんバーが伸びています。
また、■をクリックすると、interactionに紐づいているコミットに飛ぶことができます。
レンダリング速度が遅くなるとき
プロファイリングしながら、テキストボックスの値をだんだんと増やしてみます。
最初のコミットではあまり時間がかかっていませんが、
値が増えると遅くなることがわかります。
閾値を設定して時間のかかってるコミットだけを表示することもできます。
思ったこと
- interactionをactionに仕込むのは有用そう
- production環境だとinteractionは表示されないらしい
- redux-loggerとか使ってるとあまり魅力に感じないかも
- interaction周りは後にブログに書かれるみたいです
- 現状、unstableなのでAPI周りは大いに変わりうる
- Elementsで選択した親コンポーネントに紐づく子要素だけを表示してくれて便利
- かかってる秒数で絞り込んでボトルネックを探していけて便利
まとめ
interactionは自分で仕込まないといけないけど、
プロファイリングだけならReactのversionあげればいいだけなので、お手軽。