🎨 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. 🚀