In React, controlled and uncontrolled inputs refer to two different approaches to managing form elements like text inputs, checkboxes, or radio buttons. In this snippet let’s check the difference between them.

 

 

 

Controlled Components

A controlled component is an input element whose value is controlled by React state. In other words, the value of the input is tied to the state of the React component, and any changes to the input are handled by updating that state.

Key Characteristics of Controlled Components:

• The value of the input is always determined by the React component state.

• To update the input, you must use the onChange event handler to update the component’s state.

• The input’s value is set through the value prop.

Example:

import React, { useState } from 'react';

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

  const handleChange = (e) => {
    setValue(e.target.value); // update state with input value
  };

  return (
    <div>
      <input 
        type="text" 
        value={value} // the value is controlled by the state
        onChange={handleChange} // update state when the user types
      />
      <p>Value: {value}</p>
    </div>
  );
}

export default ControlledInput;

Benefits of Controlled Components:

• The form data is tied directly to the component’s state, making it easy to validate, manipulate, or submit.

• Easy to manage and debug the form data because it’s stored in React state.

• You can use lifecycle methods (or hooks like useEffect) to react to state changes.

 

 

Uncontrolled Components

An uncontrolled component is an input element where the value is managed by the DOM itself rather than React state. React does not control the input value; instead, you can use refs to access the value when you need it.

Key Characteristics of Uncontrolled Components:

• The value of the input is handled by the DOM, not React.

• To get the current value of the input, you use a ref, which provides access to the DOM node.

• The input element’s value is not tied to the state, so React does not re-render the component when the input changes.

 

Example:

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Current input value: ' + inputRef.current.value); // Access value via ref
  };

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

export default UncontrolledInput;

Benefits of Uncontrolled Components:

• Less boilerplate code because you don’t need to track the value in React state.

• Potentially better performance for forms with many inputs since React isn’t constantly re-rendering the component.

• Useful when you’re integrating with non-React code or libraries that manipulate the DOM directly.

 

When to Use Controlled vs. Uncontrolled Inputs

• Use controlled components when:

  • You need to perform validation, format the data, or manipulate the input value in real-time.

  • You want to integrate the input with the component’s state and be able to handle form submission programmatically.

  • You need to trigger side effects based on input changes.

• Use uncontrolled components when:

  • The form is simple, and you don’t need to track input value in state.

  • You don’t need to manage the input value directly with React, or you’re dealing with a library that directly manipulates the DOM.

  • You want to avoid the performance overhead of managing state for every keystroke (although in most cases, the difference is minimal).