controlled-uncontrolled
Installation
SKILL.md
Controlled vs. Uncontrolled Input Audit Skill
This skill guides a thorough audit of React form/input components for mixed controlled and uncontrolled usage, and normalizes them to one clear pattern.
Background: The Core Distinction
| Pattern | How it works | React manages state? |
|---|---|---|
| Controlled | value prop bound to state; onChange updates state |
Yes |
| Uncontrolled | defaultValue or no value prop; DOM holds the value |
No (ref or none) |
The cardinal rule: A component must be one or the other, consistently. Mixing them
(e.g., initializing with defaultValue then later binding value, or omitting onChange
when value is set) causes React warnings and unpredictable behavior.