Controlled components have their state controlled by React, while uncontrolled components store their own state internally.
Controlled components use props and callbacks, while uncontrolled components use refs to get form values.
Controlled components are the recommended approach as they provide better control over form data and validation.
Uncontrolled components can be simpler for basic forms but offer less control.
// Controlled Component function ControlledInput() { const [value, setValue] = useState('');
return ( <input value={value} onChange={(e) => setValue(e.target.value)} /> ); }
// Uncontrolled Component function UncontrolledInput() { const inputRef = useRef();
const handleSubmit = () => { console.log(inputRef.current.value); };
return ( <input ref={inputRef} defaultValue="" /> ); }