Controlled vs Uncontrolled Components in React JS

In React, managing form elements and user input is a crucial part of building interactive applications. React provides two primary ways to handle form inputs: controlled components and uncontrolled components. In this article, we will explore the differences between these two approaches, their use cases, and examples of how to implement them in React.

What are Controlled Components?

A controlled component is a component that renders form elements and controls the form elements' state using React's state. In a controlled component, the input value is stored in the component's state, and any updates to the input are handled through state changes. This allows React to control the form's behavior and provides more control over the data.

Example: Controlled Component

Here is an example of a controlled component in React. In this example, we create a simple form with an input field where the input value is controlled by React's state:

          
              import React, { useState } from 'react';

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

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

                  const handleSubmit = (event) => {
                      event.preventDefault();
                      alert('Form submitted with value: ' + inputValue);
                  };

                  return (
                      

                          
                          
                      

                  );
              }

              export default ControlledForm;

In this example:

  • The inputValue state holds the current value of the input field.
  • The value attribute of the input field is controlled by the state. Whenever the user types, the handleChange function is called, which updates the state.
  • The form submission is handled in the handleSubmit function, where we can access the current state value of the input.

What are Uncontrolled Components?

Uncontrolled components are components where form data is handled by the DOM itself rather than by React's state. The input fields in uncontrolled components maintain their own state, and React does not directly manage their value. Instead, we interact with the DOM directly using refs to get the current value of an input.

Example: Uncontrolled Component

Here is an example of an uncontrolled component in React. In this case, the form input value is not stored in the state, but rather accessed using a ref:

          
              import React, { useRef } from 'react';

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

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

                  return (
                      

                          
                          
                      

                  );
              }

              export default UncontrolledForm;

In this example:

  • The inputRef is used to store a reference to the DOM element for the input field.
  • Instead of managing the value with React's state, we access the value of the input directly using inputRef.current.value.
  • When the form is submitted, the input value is obtained from the DOM and displayed in an alert.

Controlled vs Uncontrolled Components: Key Differences

Here is a quick comparison between controlled and uncontrolled components:

Aspect Controlled Component Uncontrolled Component
State Management React manages the input state via state variables. DOM manages the input state using refs.
Access to Data Data is accessed via React's state. Data is accessed using the DOM reference (refs).
Performance Can be slower for large forms as React re-renders on every change. More performant for large forms as it avoids unnecessary re-renders.
Ease of Use Provides more control and flexibility over form data. Less control over form data, but easier to implement in simple forms.

When to Use Controlled Components

Controlled components are ideal when you need to:

  • Perform real-time validation or formatting of form input.
  • Handle complex user interactions with form elements.
  • Access or modify the form data dynamically (e.g., in response to user input).
  • Maintain form data within the state for easy synchronization with other parts of your application.

When to Use Uncontrolled Components

Uncontrolled components are suitable when:

  • You need to quickly implement forms without React managing every input state.
  • Form elements are simple and do not require complex validation or interactions.
  • Performance is a concern, and you want to avoid frequent re-renders for large forms.

Conclusion

Both controlled and uncontrolled components have their place in React applications. Controlled components offer more flexibility and control, making them ideal for complex forms and applications where form data needs to be managed within the React state. On the other hand, uncontrolled components are easier to implement and can offer performance benefits in simple forms where React does not need to manage the input state.

Choosing between controlled and uncontrolled components largely depends on the requirements of your application. For most scenarios, controlled components are recommended due to the tighter integration with React’s state and rendering model.




Advertisement