Controlled and Uncontrolled Components

In React.js, the difference between controlled and uncontrolled components revolves around how they handle form data and manage state.

Controlled Components

Definition: Controlled components are those in which form data is handled by the React component itself. The component’s state is the single source of truth, and the state is updated via event handlers.

Characteristics:

• The value of the input element is controlled by React state.
• Requires an onChange event handler to update the state.
• Provides more control over form data and validation.

Example:

import React, { useState } from 'react';

function ControlledComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + value);
    event.preventDefault();
  };

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

export default ControlledComponent;

In this example, the value of the input field is controlled by the component’s state, and it updates via the handleChange event handler.

Uncontrolled Components

Definition: Uncontrolled components are those in which form data is handled by the DOM itself. We access the form data using references (refs) instead of managing state within the component.

Characteristics:

• The value of the input element is controlled by the DOM.
• Does not require an onChange event handler to update the value.
• Useful for integrating React with non-React code or when we need a quick way to handle simple forms.

Example:

import React, { useRef } from 'react';

function UncontrolledComponent() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + inputRef.current.value);
    event.preventDefault();
  };

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

export default UncontrolledComponent;

In this example, the value of the input field is accessed through a reference (ref) instead of being managed by the component’s state.

Key Differences

• State Management:
  • Controlled: State is managed by React, ensuring the component’s state is always in sync with the input’s value.
  • Uncontrolled: State is managed by the DOM, and the component accesses the value via refs.
• Complexity:
  • Controlled: More code is required to handle state and events, but provides better control over the form data and validation.
  • Uncontrolled: Simpler to implement for basic forms, but less control over the form data.
• Use Cases:
  • Controlled: Preferred for complex forms where validation, dynamic updates, or advanced form handling is required.
  • Uncontrolled: Suitable for simple forms, quick prototypes, or when integrating with non-React code.

Choosing between controlled and uncontrolled components depends on the complexity of our form and the level of control we need over our form data. If we need precise control and robust handling, controlled components are the way to go. For simpler needs or quick implementations, uncontrolled components can be an efficient choice.