skills.rest
remotion-dev
remotion-devOFFICIAL
Explore all skills by this author →
Website𝕏@remotionGitHub

react-scan

Capture and analyze Remotion Studio React render profiles to diagnose re-render performance issues.

57.9k|4.4k|Updated Jun 23, 2020
Search Tags:#Performance#memoization#re-renders#Remotion#reAct#Studio#Profiling
One-click install
npx skills add https://github.com/remotion-dev/remotion --skill react-scan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-scan
Source: https://github.com/remotion-dev/remotion/tree/main/.agents/skills/react-scan
Command: npx skills add https://github.com/remotion-dev/remotion --skill react-scan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnosing unnecessary React re-renders and slow commits in Remotion Studio by source inspection alone is unreliable. This Skill provides a reproducible capture-and-compare workflow grounded in measured profiling data.

Core Features & Use Cases

  • Targeted Render Capture: Records React Scan Lite profiles of specific Studio interactions with metadata, git state, and browser context.
  • Ranked Cost Analysis: Inspects component self duration, render causes, and slow commits to locate expensive boundaries.
  • Before/After Verification: Compares baseline and post-optimization captures to confirm improvements without behavior regressions.
  • Use Case: When a Studio panel feels sluggish during timeline scrubbing, record three scrubbing interactions, identify the top-ranked component by self duration, apply a memoization fix, and re-capture to verify the commit metric improved.

Quick Start

Run the react-scan skill to capture a render profile of the timeline scrubbing interaction and report the top three components by self duration.

Frequently Asked Questions about react-scan

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I profile React re-renders in Remotion Studio?▼

Run bun run react-scan:capture with a kebab-case label, perform the target interaction three times, then stop the command. The output directory under out/react-scan/ contains metadata.json, summary.json, and events.ndjson for analysis.

What is the difference between self duration and inclusive duration in React profiling?▼

Self duration measures work performed by the component itself, while inclusive duration includes child component work. Use inclusive duration to locate expensive subtrees, then self duration to identify the actual work.

Can I use React DevTools Profiler alongside React Scan Lite?▼

No. React Scan replaces the React DevTools profiling-hook channel while active. Recording with the React DevTools Timeline Profiler simultaneously will produce incomplete or conflicting data.

Why does a component re-render repeatedly without prop changes?▼

High parentRenderCount with no relevant prop, state, context, or hook change typically indicates a missing memoization boundary. Wrap the component in React.memo or stabilize the parent reference to block the cascade.

When should I avoid adding memoization to a React component?▼

Avoid memoization when renders are cheap and necessary, when hook, state, or context changes drive the updates, or when memoization complexity outweighs the measured render cost. Always verify with a before/after capture.

Related Skills

Explore More Software Engineering Skills→
remotion-devremotion-dev
4.2k

remotion-interactivity

Outline best practices for designing interactive animations in Remotion Studio.

Official
Intermediate
pratikrath126pratikrath126
42

react-best-practices

Identify and apply React/Next.js performance best practices during code reviews.

Community
Advanced
VrooliVrooli
54

Bugfix Scope

Define bug fix boundaries to prevent scope creep and unrelated refactors.

Official
Basic
WhaleylawWhaleylaw

chrome-devtools-specialist

Diagnose frontend issues using Chrome DevTools workflows.

Community
Advanced