Topics In Demand
Notification
New

No notification found.

Controlled & Uncontrolled Components in React
Controlled & Uncontrolled Components in React

November 22, 2021

612

0

Earlier days of coding required developers to write hundreds of lines of code just to develop a single-page application. This usually involved the traditional Document Object Model (DOM) structure. Making changes to these applications was a challenging and tedious task, as developers had to manually search for the element to be changed and update it accordingly. Even a tiny mistake can lead to application failure. Furthermore, updating DOM was expensive. This is where the component-based approach came into the picture. React has opted for this approach.

React is a JavaScript library used to build user interfaces. It supports two types of components, viz. Controlled components and Uncontrolled components. Both the Controlled and Uncontrolled components are used to represent the React components that render HTML form elements. Whenever we produce a React component that renders an HTML form element, we create either a Controlled component or an Uncontrolled component. Uncontrolled and Controlled components differ in the way they access the data from the form elements(<textarea>, <select>, <input>).

Let's discuss these Controlled and Uncontrolled components in detail.

Controlled Components

The Controlled component renders form elements and controls them by keeping the form data in the component's state.

Instead of the DOM, the component handles the input of the form element. It has the functions that govern the data that is passed on every onChange event. The mutable state is kept inside the state property and updated only with the setState() method. The Controlled component takes its current value through props and notifies the changes by the callbacks.

Let's consider an example to understand it in a better way.

import { useState } from "react"; 
const ControlledInput = () => { 
  const [userName, setUserName] = useState(""); 
  const onUserNameChanged = (e) => { 
    setUserName(e.target.value); 
  }; 
 
  return ( 
    <div> 
      <div>User name : {userName}</div> 
      <input name="user-name" value={userName} onChange={onUserNameChanged} /> 
    </div> 
  ); 
}; 

The input field is Controlled because React sets its value from the state <input value={value} ... />. Whenever we type into the input field, the onChange handler updates the state with the input’s value accessed from the event object. The value state variable is the source of truth. When we need to access the value entered by the user into the input field, we have to read the value from the state variable. The Controlled components can help access the value of any input field.

Uncontrolled Components

An Uncontrolled component stores its own state internally, and we have to query the DOM with the help of a ref to find its current, a bit more like in traditional HTML. There is no need to write a separate Event handler for each input element in an Uncontrolled component to update the state. It can be used whenever we need the value of the input element ref.

import { useRef } from "react"; 
const UncontrolledInput = () => { 
  const inputValueRef = useRef(""); 
  const buttonClicked = () => { 
    alert(inputValueRef.current.value); 
  }; 
  return ( 
    <div className="App"> 
      <input type="text" ref={inputValueRef} /> 
      <button onClick={buttonClicked}> Submit </button> 
    </div> 
  ); 
}; 
  

Whenever we need access to the data from Uncontrolled components, we have to use a ref. It allows us to reference a DOM element or class component from within a parent component. Refs allow us to "pull" the value from a field. In the above example, we access the data on the button, click and display it on alert.

In short, we can summarize the highlighting difference between Controlled & Uncontrolled components as:

controlled and Uncontrolled components-1

I will recommend using Controlled components to implement forms. However, we might need to use both depending on what the requirement calls for. We hope this blog will help to decide which components to use and how they behave. 


That the contents of third-party articles/blogs published here on the website, and the interpretation of all information in the article/blogs such as data, maps, numbers, opinions etc. displayed in the article/blogs and views or the opinions expressed within the content are solely of the author's; and do not reflect the opinions and beliefs of NASSCOM or its affiliates in any manner. NASSCOM does not take any liability w.r.t. content in any manner and will not be liable in any manner whatsoever for any kind of liability arising out of any act, error or omission. The contents of third-party article/blogs published, are provided solely as convenience; and the presence of these articles/blogs should not, under any circumstances, be considered as an endorsement of the contents by NASSCOM in any manner; and if you chose to access these articles/blogs , you do so at your own risk.


© Copyright nasscom. All Rights Reserved.