What problem does it solve? React applications often suffer from slow interactions caused by unnecessary re-renders, long commits, or browser-side work, and it is hard to tell which layer is responsible. This Skill provides a structured workflow for gathering the right profiling evidence so performance claims are backed by measurements instead of guesses. ## Core Features & Use Cases - React DevTools Profiler workflow: Record bounded interaction scenarios, inspect commits in order, and attribute renders to specific components to form hypotheses about unstable props, context updates, or missing memoization. - Programmatic <Profiler> measurements: Wrap the smallest relevant subtree with React's Profiler component and record commit phase, actual duration, base duration, and interaction labels for repeatable comparisons. - Browser trace correlation: Align React commit windows with Chrome DevTools Performance traces using User Timing marks to separate render cost from layout, paint, network, and garbage collection. - Use Case: A settings page feels laggy when toggling a filter. Record the interaction in React DevTools Profiler, identify which components re-render unnecessarily, verify the cause in code, apply memoization, then re-record the same scenario to confirm the improvement. ## Quick Start Profile the filter toggle interaction on my settings page with React DevTools Profiler and tell me which components re-render unnecessarily.
