Controlled and Uncontrolled Components in React

In React, forms can be created using either controlled or uncontrolled components. Understanding the difference between the two is essential for managing form state and user inputs effectively.

Controlled Components

Controlled components are those where the form data is handled by the React component's state. The state becomes the "single source of truth" for the input elements.

Example of a Controlled Component

import React, { useState } from 'react';

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

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

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

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

export default ControlledForm;

Uncontrolled Components

Uncontrolled components rely on the DOM to handle form data. Instead of using state, refs are used to access the input's value directly from the DOM.

Example of an Uncontrolled Component

import React, { useRef } from 'react';

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

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

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

export default UncontrolledForm;

When to Use Controlled vs Uncontrolled Components

Controlled Components

• Use cases: When you need to validate input, conditionally enable/disable form elements, enforce input formats, or integrate with other state-driven logic.
• Benefits: Easier to manage form state, validate inputs, and enforce rules.
• Drawbacks: More boilerplate code and potentially more re-renders.

Uncontrolled Components

• Use cases: When you need a quick form with minimal logic, such as a simple subscription form.
• Benefits: Less code and potentially better performance due to fewer re-renders.
• Drawbacks: Harder to validate inputs and manage form state.

Hybrid Approach

Sometimes, a hybrid approach can be used, combining both controlled and uncontrolled components to balance performance and control.

Example of a Hybrid Approach

import React, { useState, useRef } from 'react';

const HybridForm = () => {
  const [formData, setFormData] = useState({ email: '' });
  const inputRef = useRef(null);

  const handleChange = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Email: ${formData.email}, Name: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        Name:
        <input type="text" ref={inputRef} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default HybridForm;

Conclusion

Both controlled and uncontrolled components have their use cases and benefits. Controlled components offer more control and are ideal for complex forms, while uncontrolled components are simpler and can be useful for quick, straightforward forms.