Choosing the Right Data Handling Path in React: Controlled vs. Uncontrolled Components

As we dive deeper into web development with React, we encounter different approaches to handling data in our components. Two of the most important concepts are controlled components and uncontrolled components.

Controlled Components

Controlled components in React are those in which state and data manipulation are completely managed by React. This means that the value of the component and its internal state are linked through React-controlled props and events.

The controlled component receives its initial value and any change in its state is reflected in the user interface in a controlled manner. Controlled components provide a higher level of control and allow for precise data management.

Example of a controlled component:

import React, { useState } from 'react';

const ControlledComponent = () => {
  const [value, setValue] = useState('');
  const handleChange = (event) => {
    setValue(event.target.value);
  };
  return (
    <input type="text" value={value} onChange={handleChange} />
  );
};
export default ControlledComponent;

In this example, the state of the component is controlled by React through the useState hook. The value of the input is stored in the “value” state and is updated by the onChange event.

Whenever there is a change in the input, the state is updated and automatically reflected in the user interface.

Uncontrolled Components

On the other hand, the uncontrolled components in React do not rely on React’s internal state to handle the data. Instead, they rely on direct references to DOM elements to obtain and manipulate data.

Data is pulled directly from the DOM when necessary, for example, using references or element accessor methods.

Uncontrolled components are more flexible and can be helpful in situations where quick access to data is needed or when working with large forms.

Example of an uncontrolled component:

import React, { useRef } from 'react';

const UncontrolledComponent = () => {
  const inputRef = useRef(null);
  const handleClick = () => {
    const value = inputRef.current.value;
    console.log(value);
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Obtener Valor</button>
    </div>
  );
};
export default UncontrolledComponent;

In this example, the component does not rely on React’s internal state to get the value of the input. Instead, it uses a reference (ref) to directly access the DOM element and get the value.

When the button is clicked, the input value is obtained and displayed in the console.

Conclusion

The choice between controlled and uncontrolled components in React depends on the context and specific requirements of your application.

Controlled components are ideal when you need tighter control over data and data manipulation. On the other hand, uncontrolled components offer a more flexible and faster solution in certain situations.

Understanding the differences between these two approaches will allow you to select the most appropriate approach for your needs and take full advantage of React’s data-handling capabilities.

Read more:

• Optimizing State Management in React Applications: From Small to Large-Scale
• Boosting React App Performance: A Guide to Lazy Loading and Suspense

Want to connect with the Author?

Love connecting with friends all around the world on Twitter.