studio-perf

โดย remotion-dev

Optimize Remotion Studio render performance by minimizing frame-reactive component surfaces, preferring imperative timeline state reads, and memoizing stable…

npx skills add https://github.com/remotion-dev/remotion --skill studio-perf

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.

Skills เพิ่มเติมจาก remotion-dev

pr-name
remotion-dev
การตั้งชื่อที่ถูกต้องสำหรับ PR
official
pr-ready
remotion-dev
แก้ไข CI ที่ล้มเหลว, แก้ไขความขัดแย้งในการรวมโค้ด, หรือการเปลี่ยนแปลงในสาขาท้องถิ่นเพื่อเตรียม PR ให้พร้อม
official
release
remotion-dev
ปล่อยเวอร์ชัน Remotion ใหม่
official
remotion-captions
remotion-dev
การจัดการกับคำบรรยายใน Remotion
official
remotion-create
remotion-dev
กำลังสร้างวิดีโอ Remotion ใหม่
official
video-report
remotion-dev
สร้างรายงานเกี่ยวกับวิดีโอ
official
add-bug
remotion-dev
เพิ่มรายการบั๊ก Remotion ใหม่ไปยัง packages/bugs/api/[v].ts ใช้เมื่อผู้ใช้อธิบายบั๊กและเวอร์ชัน Remotion ที่ได้รับผลกระทบซึ่งควรแสดงผ่านทาง…
official
add-cli-option
remotion-dev
เพิ่มตัวเลือก CLI หรือการกำหนดค่า Remotion ใหม่ โดยการสร้าง AnyRemotionOption, ลงทะเบียนการแยกวิเคราะห์ CLI, เชื่อมต่อตัวตั้งค่าการกำหนดค่า และอัปเดตเอกสาร ใช้เมื่อ...
official