Post
Ask Question

What are Uncontrolled Components in React?

Uncontrolled components in React are components where form data is handled by the DOM itself, rather than by React components. In other words, the state of the form elements (like input, textarea, and select) is managed by the DOM, not by React's state.

Here's a detailed explanation along with an example.

Controlled components in React

In controlled components, form data is handled by React and stored in the component's state. This means that the value of the form elements is controlled by React through the component's state, and any changes to the input values are handled by React event handlers.

Uncontrolled components in React

In contrast, uncontrolled components delegate the management of form data to the DOM itself. This means that the value of the form elements is maintained by the DOM, and React doesn't have direct control over it. Instead, you can use React to interact with the form element through refs, but the state of the form element is not stored in React's state.

Example

Let's create an example of an uncontrolled component using an input element.

import React from 'react';

class UncontrolledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef(); // Create a ref to hold the reference to the input element
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('Input Value:', this.inputRef.current.value); // Access the input value using ref
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        {/* Assign the ref to the input element */}
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default UncontrolledComponent;

In this example

  • We create a class component UncontrolledComponent.
  • In the constructor, we create a ref using React.createRef() to hold a reference to the input element.
  • In the handleSubmit method, we prevent the default form submission behavior and log the value of the input element accessed through the ref.
  • In the render method, we assign the ref to the input element using the ref attribute.
  • When the form is submitted, the input value is accessed directly from the DOM using the ref, without storing it in React's state.

Benefits of Uncontrolled Components

  1. Simplicity: Uncontrolled components are often simpler to implement than controlled components, especially for forms with many input fields.
  2. Performance: Since the form data is managed by the DOM, there is no overhead of updating React's state for every change in the form fields, which can lead to better performance in certain cases.
  3. Compatibility: Uncontrolled components can be useful when integrating with non-react libraries or when working with legacy code that relies on traditional form handling approaches.

However, it's important to note that uncontrolled components lack the benefits of React's declarative and uni-directional data flow model, such as centralized state management and easy data manipulation. Therefore, controlled components are generally recommended for most use cases in React applications.


Similar Articles