React Profiler API
from ReactNativeのパフォーマンス
React本家のパフォーマンス計測のためのツール
<Profiler> でwrapした内部のコンポーネント群のRendering時間を計測 <Profiler> はネストもできる実機で使用できる
メモ化すべき箇所の指摘
Productionには残さないほうが良い
遅くなる
props
id
onRender
id
Profilerのidの名前
phase:
"mount" | "update" 初回mountなのか、再描画なのかを示す
actualDuration
今回の更新でProfilerとその子孫の描画に要した時間
memo化の指標になる
理想的にはupdateのときは、mountに比べてかなり小さくなるべき
子孫要素は特定のpropsが変化したときのみ再描画されるべきなので
baseDuration
一切のmemo化なしで描画した場合の最悪の時間を推定して表示
これとactualDurationの差を見るのか
startTime
Reachが更新の描画を開始したタイムスタンプ
commitTime
Reactが更新をコミットした時刻
描画終了のタイムスタンプ
interaction
更新がスケジュールされた（render や setState の呼び出しなどにより）際に trace された “interaction” の Set
よくわからん
例
tsimport React, { useEffect, Profiler, ProfilerOnRenderCallback } from 'react';
const callback: ProfilerOnRenderCallback = (
id,
phase,
actualTime,
baseTime,
startTime,
commitTime
) => {
console.log(`${id}'s ${phase} phase=====
Actual time : ${actualTime}
Base time : ${baseTime}
Start time : ${startTime}
Commit time : ${commitTime}
`);
};
const App: React.FC = () => {
return (
<App>
<Profiler id='Navigation' onRender={callback}>
<Navigation {...props} />
</Profiler>
<Main {...props} />
</App>
);
};お気持ち
Rootに近い場所でProfiler仕込んでもあまり参考にならない
「これとこれの数値の差があるべき」というが、差がありすぎるので参考にならない
ActualとBaseが5000倍ぐらい違う
もう少し細かい単位で仕込むと良さそう
どうやって本番環境で使う？
Firebase Performance Monitoringと組み合わせるの？
これらの数値をどう見ればいい？
具体的にどの数値に着目し、どこから改善スべきなのかがわからない
例えば
AとBの差が開いているのは良くない
Aは100以下じゃないと良くない
など
計測できるのは、mountとupdateのみであって、ユーザーのインタラクションなどは無理？
ex. 「いいね」した
参考