What problem does it solve?
This Skill helps eliminate React anti-patterns where components store derived values, mirror props or React Query/server data into local useState, or rely on chained useEffect updates that create stale UI and hard-to-debug re-render loops.
Core Features & Use Cases
- Detects derived-state stored in useState and replaces it with inline computation during render.
- Flags server-state copied into useState (including sync patterns from React Query) so React Query remains the single source of truth, with the forms-only exception for user edits.
- Identifies props mirrored into state and chained useEffect state updates, recommending direct prop usage or safer reset approaches.
- Improves selection state modeling by storing IDs instead of duplicating whole objects, deriving objects from IDs.
- Avoids duplicating Zustand or React Query by removing parallel local state that already exists in a store or cache.
Use Case: In a PR that adds a filter or selection UI, it can analyze the targeted folder or diff and rewrite state management so server data comes directly from React Query, derived values are computed during render, and selection uses IDs to prevent unnecessary rerenders.
Quick Start
Use the skill to analyze the current changes for unnecessary state by setting the scope to "src/components/" and keeping fix enabled, then apply the proposed refactors.
