🎨 Controlled vs Uncontrolled Components in React: What’s the Difference?

When working with forms in React, you’ll come across controlled and uncontrolled components. Let’s break it down 👇

📌 Controlled Component
The form data is handled by React state.

function App() { const [name, setName] = useState(""); return ( <input value={name} onChange={(e) => setName(e.target.value)} /> ); } 

✅ React fully controls the input.

📌 Uncontrolled Component
The form data is handled by the DOM itself using ref.

function App() { const inputRef = useRef(); return ( <input ref={inputRef} /> ); } 

✅ Useful when you don’t need to track every change.

✨ Key Difference:
• Controlled → State managed by React.
• Uncontrolled → State managed by DOM.

👉 Rule of thumb: Use controlled components when you need form validation or dynamic updates. 🚀