Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Fall back nullable values to an empty string for controlled inputs
Coerce a possibly-null/undefined field with a fallback operator before passing it as a controlled input's value, to avoid React's controlled/uncontrolled warning.
Bad example
| 1 | <textarea |
| 2 | id="title-image-caption" |
| 3 | value={titleImage.caption} |
| 4 | onChange={(e) => updateField('caption', e.target.value)} |
| 5 | /> |
Explanation (EN)
If titleImage.caption can be null, the input starts uncontrolled (value is null) and then becomes controlled once the user types, which triggers React's warning about a component changing an uncontrolled input to controlled, and can cause subtle focus or behavior bugs.
Objašnjenje (HR)
Ako titleImage.caption moze biti null, input krece kao nekontroliran (vrijednost je null), a zatim postaje kontroliran cim korisnik nesto upise, sto izaziva React-ovo upozorenje o promjeni nekontroliranog inputa u kontroliran i moze uzrokovati suptilne probleme s fokusom i ponasanjem.
Good example
| 1 | <textarea |
| 2 | id="title-image-caption" |
| 3 | value={titleImage.caption ?? ''} |
| 4 | onChange={(e) => updateField('caption', e.target.value)} |
| 5 | /> |
Explanation (EN)
Falling back to an empty string guarantees the input is always controlled with a string value, regardless of whether the underlying field has been set yet.
Objašnjenje (HR)
Fallback na prazan string garantira da je input uvijek kontroliran string vrijednoscu, bez obzira je li povezano polje uopce postavljeno.