React Form Handling

Introduction

In a React app, forms are usually utilized for gathering user input. You can manage forms in Reactwith either controlled or uncontrolled components. React encourages the use of controlled components since they offer superior state management and responsiveness.

A controlled component refers to an input element whose value is managed by the state in React. This implies that the input field’s value is linked to the state, and any changes made to the input field are communicated through the onChange event handler.

To understand the form handling in React, it is essential to understand the controlled and uncontrolled components.

Controlled vs Uncontrolled Components

In React, the controlled and uncontrolled components describe the management of form elements such as <input>, <select>, and <textarea> in terms of state.

a. Controlled Components

A controlled component is one that has its value managed by React through its state. This means that React “controls” the input value and any modifications made to it. The state gets updated through an event handler (such as onChange), and the value of the form element is directly linked to the component’s state.

Example:


import React, { useState } from 'react';

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

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

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
  );
}

Key Concepts:

Controlled Component: The input field is a controlled component because its value is tied to the component’s state.
State Management: The useState hook stores and updates the current input value.

Advantages:

Simple to verify input.
Can initiate side effects or actions when the value changes.
Single source of truth.

Disadvantages:

More code is required to manage updates.
Can lead to unnecessary re-renders in complex forms.

b. Uncontrolled Components

A component is considered uncontrolled when the form element controls its internal state independently (managed by the DOM). React does not monitor the value directly; rather, you retrieve the current value by interacting with the DOM, typically using refs.

Example:


import React, { useRef } from 'react';

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

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

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

Key Concepts:

Uncontrolled Component: The value is managed by the DOM, and not by React state.
useRef: Used to reference the DOM node directly.

Advantages:

Easier for simple forms where state isn’t needed.
Less boilerplate code.
Prevents unnecessary re-renders.

Disadvantages:

Difficult to validate or control dynamically.
Limited response to input changes.

Comparison Table

Feature	Controlled Component	Uncontrolled Component
State management	React manages the state via useState or this.setState.	DOM manages the state via refs.
Value tracking	Always tied to the component’s state.	React does not track the value directly.
Event handling	Requires onChange to update state.	No need for event handlers for changes.
Use case	Ideal for validations, conditional logic, dynamic state control.	Best for basic input or quick forms without interaction.
Re-rendering	Component re-renders on each change.	Does not re-render unless triggered manually.

Conclusion

Managing forms in React is a crucial ability for developing interactive web applications. By grasping the distinction between controlled and uncontrolled components, handling state for input fields, and validating information, developers can produce dynamic and user-friendly forms.

React’s declarative style in managing forms offers versatility, enabling developers to write clean and maintainable code. For more intricate forms, libraries such as Formik and React Hook Form can simplify the process, especially for validation, error handling, and form submission.

Now that we have enough understanding of controlled and uncontrolled components, let’s move on to form handling in the next blog post.

Request more information

React Form Handling