react-profiling
Installation
SKILL.md
React Performance Profiling Skill
Use this skill when a React application's render behavior, commit duration, component re-render frequency, or interaction latency needs evidence. Choose the smallest profiler that answers the question, and keep React render evidence separate from browser layout, paint, network, and GPU evidence.
Choose the evidence
| Question | First evidence | Why | Boundary |
|---|---|---|---|
| Which components re-render, how often, and why during an interaction? | React DevTools Profiler | Interactive commit timings and component render attribution | React render attribution does not explain network, layout, paint, or browser scheduling by itself |
| How long does a specific React subtree render across commits in code? | React <Profiler id="..." onRender={...}> |
Programmatic measurements for commits in the wrapped subtree | Measures React render commits for that subtree, not network, layout, paint, or GPU work |
| Is load, interaction, layout, or paint work causing the user-visible delay? | Chrome DevTools Performance trace | Correlates scripting, tasks, layout, paint, network, and user interactions on the browser timeline | Browser traces do not automatically identify which React component caused a render |
React DevTools Profiler workflow
Use React DevTools Profiler as the interactive tool for commit timings and component render attribution.