In React, controlled and uncontrolled components refer to how the form elements (like input fields, textareas, etc.) manage their state.

1️⃣ Controlled Components 🎮

• What it is:
  A controlled component is one where the form element’s value is controlled by React’s state. The state is the “single source of truth,” meaning React is fully responsible for managing the value of the input field.

• How it works:
  The input value is tied to a piece of state, and any change in the input updates that state via an onChange handler.

• Example:

  import { useState } from "react";
  
  function ControlledComponent() {
  const [value, setValue] = useState("");
  
  const handleChange = (event) => {
  setValue(event.target.value);
  };
  
  return (
  <div>
  <input
  type="text"
  value={value} // Controlled value
  onChange={handleChange} // Update state on change
  />
  <p>Current value: {value}</p>
  </div>
  );
  }

• Key Points:

  • React manages the value of the form field.
  • State is updated on each user input.
  • Makes form data easier to handle and validate.

2️⃣ Uncontrolled Components 🕹️

• What it is:
  An uncontrolled component manages its own state internally (the browser handles it). In this case, React doesn’t directly manage the form element’s value. Instead, it relies on a ref to access the current value.

• How it works:
  The value of the input is handled by the DOM itself. React only interacts with the component when necessary (e.g., reading its value using a ref).

• Example:

  import { useRef } from "react";
  
  function UncontrolledComponent() {
  const inputRef = useRef();
  
  const handleSubmit = (event) => {
  event.preventDefault();
  console.log("Input value:", inputRef.current.value); // Read value directly from the DOM
  };
  
  return (
  <form onSubmit={handleSubmit}>
  <input ref={inputRef} type="text" />
  <button type="submit">Submit</button>
  </form>
  );
  }

• Key Points:

  • The value is not controlled by React state.
  • React uses refs to access the input value when needed.
  • Great for simple forms or when you don’t need to manage the input value.

3️⃣ Comparison 📊

4️⃣ When to Use Which? 🤔

• Use Controlled Components when:

  • You need to access or validate form data in real time.
  • You need the value of the input to be synced with React state.
  • You need more control over the user input (e.g., validation, conditional rendering).

• Use Uncontrolled Components when:

  • You don’t need to track input value in real time.
  • You just want a simple form where React doesn’t need to control the state.
  • You want to avoid unnecessary re-renders from form field changes.

Summary 💡

• Controlled: React handles the form element’s state directly through state variables (better for validation and dynamic UI).
• Uncontrolled: The DOM handles the form element’s state, and React only interacts when needed (useful for simpler forms).