Quiz 1148: React Controlled Components

What is the difference between controlled and uncontrolled components in React?

Quick Answer

Controlled components have their value managed by React's state, while uncontrolled components rely on the DOM's native state to manage their values. Controlled components provide more control over form input values and validation.

Explain in Depth

React components can be categorized as either controlled or uncontrolled, depending on how they manage the values of form elements:

Controlled Components:

• Value Management: Controlled components have their values managed by React's state. The value of the form element is set by the component's state, and changes to the element's value are handled by updating the state.

• Data Flow: The data flow is unidirectional: the component's state dictates the value of the form element, and changes in the form element are reflected back in the component's state.

• Example:

  import React, { useState } from 'react';
  
  function ControlledForm() {
    const [name, setName] = useState('');
  
    const handleChange = (event) => {
      setName(event.target.value);
    };
  
    return (
      <form>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" value={name} onChange={handleChange} />
        <button type="submit">Submit</button>
      </form>
    );
  }
  

  In this example, the input field's value is tied to the name state, and any changes in the input trigger the handleChange function, updating the name state.

Uncontrolled Components:

• Value Management: Uncontrolled components rely on the DOM's native state to manage their values. The component doesn't track the value explicitly in its state.

• Data Flow: The data flow is bidirectional: the DOM's native state influences the component's display, and changes in the form element are not directly reflected in the component's state.

• Example:

  import React, { useRef } from 'react';
  
  function UncontrolledForm() {
    const nameRef = useRef(null);
  
    const handleSubmit = (event) => {
      event.preventDefault();
      const name = nameRef.current.value;
      // Process the form data using `name`
    };
  
    return (
      <form onSubmit={handleSubmit}>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" ref={nameRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
  

  Here, the input field's value is not directly controlled by the component's state. The ref is used to access the DOM element and read its value when the form is submitted.

Key Differences:

Feature	Controlled Component	Uncontrolled Component
Value Management	React state	DOM native state
Data Flow	Unidirectional	Bidirectional
Validation and Control	More precise control	Less control
Form Submission	Form data is available in state	Form data needs to be read

Choosing the Right Approach:

• Controlled Components: Use for scenarios where precise control over form data is required, for example, validation, input restrictions, and form submission logic.
• Uncontrolled Components: Consider for simpler forms where managing the value in React's state is not critical.

In general, controlled components are often preferred for their ease of validation, state management, and control over form data. However, uncontrolled components can be a simpler option for less complex forms.