Controlled vs Uncontrolled Components in React🔄

In React forms, there are two ways to handle inputs: Controlled and Uncontrolled components.

🎯 Controlled Component:
• React controls the form input using state
• Every change updates state
• Easy to validate input values

function App() {
  const [name, setName] = useState("");

  return (
    <input 
      value={name} 
      onChange={(e) => setName(e.target.value)} 
    />
  );
}

🎯 Uncontrolled Component:
• DOM itself handles the input value
• Use ref to access the value
• Less React code but harder to manage validation

function App() {
  const inputRef = useRef();

  return (
    <input ref={inputRef} />
  );
}

📌 Rule of Thumb:
• Use Controlled → when you need validation, real-time updates, or strict control.
• Use Uncontrolled → for quick, simple forms without much logic.