studio-perf について
Remotion Studio 向けの React パフォーマンス指針をまとめたスキルです。フレーム購読を抑え、安定したコンポーネント境界をメモ化し、タイムラインのフレーム変更による不要な再レンダリングを防ぎます。
主な機能
- 01コンポーネントツリー内のフレーム購読を抑制
- 02オンデマンド処理で命令的なフレーム読み取り
- 03フレーム反応型のリーフコンポーネントを分離
- 04React.memo() による安定したコンポーネントのメモ化
- 05メモ化対象の props の参照を安定化
活用シーン
- 01タイムライン再生中の再レンダリングを削減
- 02フレーム状態を子に渡す親コンポーネントのリファクタリング
- 03フレーム購読と命令的な読み取りの選択
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/studio-perfを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yaml
詳細
Studio のパフォーマンス
フレームの購読を最小限にする
現在のフレームへの依存は、コンポーネントツリー内のできるだけ下位にとどめてください。
イベントハンドラーやその他のオンデマンド処理では、Internals.Timeline.useTimelinePosition() よりも、getCurrentFrame() のような命令型のタイムライン状態の読み取りを優先してください。
useTimelinePosition() は、描画結果をフレームに応じて変更する必要がある、最も小さな末端コンポーネントでのみ使用してください。親コンポーネントがフレームを読み取って子コンポーネントに渡すだけの場合は、フレームを購読する子コンポーネントを切り出し、親コンポーネントとその他の子孫コンポーネントが安定した状態を保てるようにしてください。
安定した境界をメモ化する
親からの再レンダリングを安全にスキップできるコンポーネントは、React.memo() でラップしてください。フレームの更新をまたいで、props が参照的に安定していることを確認してください。新しく作成されたオブジェクト、コールバック、スタイル、React ノードがあると、浅いメモ化は機能しません。props の安定化は自然な場合に限って行い、動作に関わる変更を無視するカスタム比較関数は避けてください。
Context の購読者は、メモ化された祖先を通じても引き続き更新されます。サブツリー全体を現在のフレームに反応させるのではなく、メモ化された安定した親と、小さなフレーム購読末端コンポーネントを組み合わせてください。