Understanding Controlled and Uncontrolled Components in React

When building forms in React, one of the key decisions developers face is whether to use controlled or uncontrolled components. Both approaches have their own advantages and use cases, and understanding the differences between them is crucial for effective React development. In this blog post, we will explore the definitions, differences, advantages, and when to use each type of component.

What Are Controlled Components?
In React, a controlled component is a form element whose value is managed by the React component's state. In other words, React "controls" the form element by storing its current value in the component's state and updating it whenever the user interacts with the input.

Example of a Controlled Component

import React, { useState } from 'react';

const ControlledComponent = () => {
  const [inputValue, setInputValue] = useState('');

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Submitted value: ${inputValue}`);
  };

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

export default ControlledComponent;

In this example, the input field's value is controlled by the inputValue state. The handleChange function updates the state whenever the user types in the input field.

What are Uncontrolled Components?
Uncontrolled components, on the other hand, manage their own state internally. Instead of relying on React's state management, uncontrolled components use the DOM to handle form data. This means that the input values are not stored in the component's state but can be accessed using refs.

Example of an Uncontrolled Component

import React, { useRef } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Submitted value: ${inputRef.current.value}`);
  };

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

export default UncontrolledComponent;

In this example, the input field's value is accessed directly from the DOM using a ref (inputRef). The component does not maintain the input value in its state.

When to Use Each Type

• Controlled Components:
  Use controlled components when you need to manage complex forms, implement validation, or require dynamic behavior based on user input. They are also preferred when you want to keep the form data in sync with the component state.

• Uncontrolled Components:
  Use uncontrolled components for simple forms or when you want to quickly prototype without the overhead of managing state. They are also useful when integrating with non-React libraries that manipulate the DOM directly.

Conclusion
In React, controlled components are those where the form elements’ values are controlled by the React component's state. This gives you full control over the form's data, allowing you to easily manage, validate, and manipulate the input values in real-time. However, it involves more boilerplate code and can be less performant for large forms due to frequent re-renders.

On the other hand, uncontrolled components store their state internally, and React interacts with them only when necessary (e.g., on form submission). These components are simpler to implement and can offer better performance, particularly for large forms. However, they provide less control over the form data and may be harder to validate or modify dynamically.

Thank you for reading.
Happy coding!