gaia-react-perf

Diagnosing React re-render performance involves capturing component update cycles during specific user interactions. This skill uses Playwright to drive micro-interactions and analyzes render data to pinpoint unstable props, state, or context values.

React components re-render unnecessarily due to memo-defeating reference instabilities. This skill identifies unstable props, state, or context values in your development environment that bypass memoization and cause performance degradation.

Finding unstable props and state requires analyzing render dumps from specific interactions. This skill reduces complex render data into actionable summaries, identifying reference instabilities and ranking them for targeted optimization.

Yes, Playwright and pnpm are required dependencies. Playwright drives the specific micro-interactions needed to capture real-world render data, while pnpm manages the development environment setup for accurate profiling.

The best way to fix render performance is applying structural-first remediation strategies. This skill provides ranked recommendations to address reference instabilities and optimize re-render behavior without resorting to unnecessary memoization.

Yes, you can profile context value instabilities in a development environment. The diagnostic targets memo-defeating reference instabilities, specifically identifying unstable context values alongside unstable props and state during component update cycles.