What is the difference between controlled and uncontrolled components?

Controlled components: Form data handled by React state\nUncontrolled components: Form data handled by DOM\n\nControlled example:\nfunction ControlledInput() {\n const [value, setValue] = useState("");\n \n return (\n setValue(e.target.value)} \n />\n );\n}\n\nUncontrolled example:\nfunction UncontrolledInput() {\n const inputRef = useRef();\n \n const handleSubmit = () => {\n console.log(inputRef.current.value);\n };\n \n return ;\n}\n\nControlled components are preferred for validation and dynamic behavior.