In React, Controlled and Uncontrolled Components represent two different approaches to managing form inputs and component state. Each approach has its own advantages and use cases.

Controlled Components

Controlled Components are those where React is responsible for managing the form data. In other words, the form inputs are controlled by the component’s state, and changes to the inputs are reflected in the state.

Key Characteristics:

• State Management: Form values are stored in the component state.
• Single Source of Truth: The state acts as the single source of truth for form values.
• Event Handling: Input changes are handled through event handlers that update the state.

Example:

import React, { useState } from 'react';

function ControlledForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form data submitted:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default ControlledForm;

Advantages:

• Predictable State: Since the state is updated on every input change, it’s easier to manage and predict the form data.
• Validation: It’s straightforward to implement validation and conditionally render UI elements based on state.
• Consistency: The form’s input values are consistently in sync with the state.

Disadvantages:

• Boilerplate Code: Requires more code to handle state and events for each input field.
• Performance: For very large forms with many fields, frequent state updates can impact performance.

Uncontrolled Components

Uncontrolled Components are those where form data is managed by the DOM itself rather than React. The component accesses input values using refs rather than state.

Key Characteristics:

• Ref Management: Use React refs to access and manipulate form values directly from the DOM.
• Less State Management: Form values are not stored in the component’s state.
• Less Control: You have less control over the form values and their changes.

Example:

import React, { useRef } from 'react';

function UncontrolledForm() {
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Name:', nameRef.current.value);
    console.log('Email:', emailRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          ref={nameRef}
        />
      </label>
      <label>
        Email:
        <input
          type="email"
          ref={emailRef}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default UncontrolledForm;

Advantages:

• Less Boilerplate: Simpler code without the need for event handlers and state updates.
• Performance: Can be more performant in certain scenarios because React doesn’t re-render on every input change.

Disadvantages:

• Less Predictable: It’s harder to keep track of the form data because it’s not stored in React’s state.
• Validation: Implementing validation can be more complex because you need to access input values directly from the DOM.

Summary

• Controlled Components: React manages the form data through component state. This approach is preferred for most cases due to its predictability and ease of implementing features like validation and conditional rendering.
• Uncontrolled Components: The DOM manages the form data, and React accesses it using refs. This approach can be simpler and more performant in some situations but offers less control over form data.

Choosing between controlled and uncontrolled components depends on the specific requirements of your application and the complexity of the forms you’re handling. Controlled components are generally preferred for their predictability and integration with React’s state management, while uncontrolled components can be useful for simpler forms or scenarios where performance is a concern.