React Form Input Values Not Updating or Showing Stale Data
Form inputs don't update as user types. Values appear frozen. Submitted data shows old/stale values. Controlled inputs and state are out of sync.
React forms require proper state binding with onChange handlers and defaultValue or value props to keep inputs and state synchronized.
Common Causes
- Missing onChange handler on input
- Value prop without onChange (making input read-only)
- Using defaultValue instead of value for controlled input
- State not updating due to event handler issues
- Keys causing component remounts and state reset
How to Fix It
Implement controlled input with state:
const [email, setEmail] = useState('');
return (
setEmail(e.target.value)}
placeholder="Enter email"
/>
);Or use uncontrolled input with useRef for file inputs or simple cases.
Real developers can help you.
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get HelpFrequently Asked Questions
What's the difference between controlled and uncontrolled?
Controlled: value bound to state, onChange updates state. Uncontrolled: value lives in DOM, accessed via ref.
When should I use each?
Controlled for validation and conditional logic. Uncontrolled for file inputs and simple forms where you read value on submit.