What problem does it solve?
Remotion Studio components that subscribe to the current frame via useTimelinePosition() cause unnecessary re-renders across the entire component tree, leading to sluggish preview performance and wasted CPU cycles during interactive editing.
Core Features & Use Cases
- Frame Subscription Minimization: Push
useTimelinePosition() calls down to the smallest leaf component whose output must change with the frame, keeping parent components stable.
- Imperative Timeline Reads: Use
getCurrentFrame() inside event handlers and on-demand logic instead of subscribing to the reactive timeline hook.
- Memoization Strategy: Apply
React.memo() at stable render boundaries while ensuring props remain referentially stable across frame updates.
- Use Case: When a parent component reads the current frame only to forward it to a single child, extract a frame-subscribing leaf so the rest of the subtree stops re-rendering on every frame tick.
Quick Start
Use the studio-perf skill to audit my Remotion Studio components and refactor them to minimize unnecessary frame-driven re-renders.
