Skip to main content

studio-perf

Optimize Remotion Studio render performance by minimizing frame-reactive component surfaces, preferring imperative timeline state reads, and memoizing stable render boundaries. Use when code reads the current frame with `useTimelinePosition()` or components unnecessarily render on every frame.

ソース情報

リポジトリ
remotion-dev/remotion
ソースの最終更新活動
2026年8月4日 13:16
検出された SKILL.md の言語
英語
スター
68,791
フォーク
5,622

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

ファイルエクスプローラー
2 ファイル

SKILL.md を表示中

SKILL.md
ソースの指示 · 読み取り専用プレビュー
name
studio-perf
description
Optimize Remotion Studio render performance by minimizing frame-reactive component surfaces, preferring imperative timeline state reads, and memoizing stable render boundaries. Use when code reads the current frame with `useTimelinePosition()` or components unnecessarily render on every frame.
# Studio Performance ## Minimize frame subscriptions Keep dependencies on the current frame as low in the component tree as possible. Prefer imperative timeline state reads such as `getCurrentFrame()` over `Internals.Timeline.useTimelinePosition()` for event handlers and other on-demand logic. Use `useTimelinePosition()` only in the smallest leaf component whose rendered output must change with the frame. If a parent reads the frame only to pass it to a child, extract a frame-subscribing child so the parent and its other descendants stay stable. ## Memoize stable boundaries Wrap components in `React.memo()` when they can safely skip parent-driven renders. Confirm that their props remain referentially stable across frame updates: newly created objects, callbacks, styles, or React nodes defeat shallow memoization. Stabilize those props only where it is natural; avoid custom comparators that ignore behaviorally relevant changes. Context subscribers continue to update through memoized ancestors. Prefer a memoized stable parent with a small frame-subscribing leaf over making the whole subtree reactive to the current frame.
GitHubで見る