Rules
unstable-rules-of-props
Enforces the Rules of Props.
This rule is currently in beta and only available in v3.0.0 beta releases.
This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.
Full Name in @eslint-react/eslint-plugin@beta
@eslint-react/unstable-rules-of-propsFull Name in eslint-plugin-react-x@beta
react-x/unstable-rules-of-propsFeatures
🧪
Presets
Rule Details
This rule covers three concerns:
- Using conflicting prop combinations.
Common Violations
Using Controlled and Uncontrolled Props Together
Mixing both modes on the same element is a mistake. React will silently ignore the default* prop and may emit a console warning. The element behaves as controlled, which causes confusing bugs when the developer expects the initial value to be respected.
The following prop pairs must not appear together on the same element:
| Controlled prop | Uncontrolled prop |
|---|---|
value | defaultValue |
checked | defaultChecked |
Invalid
// ❌ 'defaultValue' is ignored because 'value' makes the input controlled.
<input value={name} defaultValue="World" />;// ❌ 'defaultChecked' is ignored because 'checked' makes the checkbox controlled.
<input type="checkbox" checked={isChecked} defaultChecked />;// ❌ Order does not matter — the pair is still invalid.
<textarea defaultValue="fallback" value={content} />;// ❌ Custom components that follow the same pattern are also flagged.
<MyInput value={val} defaultValue="fallback" />;Valid
// ✅ Controlled input — value is driven by React state.
<input value={name} onChange={(e) => setName(e.target.value)} />;// ✅ Uncontrolled input — host element manages the value; initial value is provided.
<input defaultValue="World" />;// ✅ Controlled checkbox.
<input
type="checkbox"
checked={isChecked}
onChange={(e) => setIsChecked(e.target.checked)}
/>;// ✅ Uncontrolled checkbox with an initial checked state.
<input type="checkbox" defaultChecked />;