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 Also published here. Want to connect with the Author? Love connecting with friends all around the world on . Twitter

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch before making any investment decisions or decisions regarding your health or security. (Do not regard any of this content as professional investment advice, or health advice)

Mastering CSS: Using Pseudo-Classes and Pseudo-Elements to Build a Landing Page

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Using React Router v6 for Private and Public Routes with Access Validation

You Might Not Need Controlled Components - A React Story

JavaScript Objects: Advanced Data Handling With Real-World Applications

Next vs Gatsby: Comparing Their Approach to Handling Data

The Nexus Between Security and Trust in Data Privacy

zlFetch now supports FormData Making Data Handling Seamless!

Using React Router v6 for Private and Public Routes with Access Validation

You Might Not Need Controlled Components - A React Story

JavaScript Objects: Advanced Data Handling With Real-World Applications

Next vs Gatsby: Comparing Their Approach to Handling Data

The Nexus Between Security and Trust in Data Privacy

zlFetch now supports FormData Making Data Handling Seamless!

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps