studio-perf

$npx mdskill add remotion-dev/remotion/studio-perf

Optimize Remotion Studio render performance by minimizing frame-reactive components and memoizing stable boundaries.

  • Reduces unnecessary re-renders caused by components subscribing to the current frame.
  • Relies on Remotion's useTimelinePosition(), getCurrentFrame(), and React.memo().
  • Identifies frame subscriptions high in the tree and suggests extracting leaf components.
  • Provides guidance to memoize stable parents and keep frame-reactive logic isolated.

SKILL.md

.github/skills/studio-perfView on GitHub ↗
---
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.

More from remotion-dev/remotion

SkillDescription
add-bugAdd a new Remotion bug entry to packages/bugs/api/[v].ts. Use when the user describes a bug and affected Remotion versions that should be surfaced through the bugs API.
add-cli-optionAdd a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring config setters, and updating documentation. Use when adding or converting command-line flags or Remotion options.
add-effectAdd a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, formatting, and builds.
add-expertAdd a new expert to the Remotion experts page
add-new-packageAdd a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, and release checklist updates. Use when creating a new @remotion package.
add-sfxAdd a new sound effect to @remotion/sfx
add-webcodecs-bugAdd a browser WebCodecs bug to the Remotion Mediabunny WebCodecs bugs docs page. Use when given a Chromium, WebKit, or Firefox issue URL that should be tracked in packages/docs/docs/mediabunny/webcodecs-bugs.mdx, especially when needing to look up the issue title, filing date, reporter, and resolution state before editing the MDX table.
canvas-capture-extensionRebuild, install, and reload the private Remotion Canvas Capture unpacked Chrome extension. Use when the extension needs to be restored after a Codex worktree was deleted, rebuilt after source changes, moved to its durable install directory, or reloaded in Chrome or Chrome Canary.
checkoutCheckout a requested branch or ref in the Remotion repo, rename the current task to the associated PR title when running in Codex, then install dependencies and build. Use when the user asks to checkout a ref and prepare the workspace.
convertStart the local @remotion/convert app and open it in the Codex browser. Use when the user invokes /convert or $convert, asks to launch convert.remotion.dev locally, or wants to inspect the Convert package UI.