Controlled vs Uncontrolled Component in React

Hello Readers 👋,

Reactjs is a javascript library for building user interfaces. if you are working or learning React, you may already know that React is all about components. Components are the fundamental feature of React.

In Reactjs there are two major categories of components based on how their state is managed.

1. Uncontrolled Components

2. Controlled components

Let's talk about the Uncontrolled component first

1. Uncontrolled Components

from Reacts Docs

Component is an uncontrolled component, where form data is handled by the DOM itself.

What's the meaning of this, Let's see by the example.

Let's take a normal input field in a component (functional or class-based).

import React from 'react';

const Foo= () => (
  <div>
     input : <input type="text" />
  </div>
);
 export default Foo;

This input field is an uncontrolled component because you can start typing in it when the application starts and see the changes without writing a single line of code for it to display in the text field. No line of code is written to handle the changes that you are making in the field still, you are able to make a change in whatever you are typing.

And that works because that's how native HTML works, HTML fields manage their own internal state.

Let's try to make this Uncontrolled component to controlled

import React, { useState } from 'react';

const Foo= () => {
  const [value, setValue] = useState('');

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

  return (
    <div>
        Input:  <input type="text" onChange={handleChange} />
      <span>
          Output: {value}
      </span>
    </div>
  );
};

export default Foo;

So in the previous code, we added a handler for uncontrolled we added a handler to handle the changes for what user is typing and managing the state using useState('').

If you now start typing, you can see exact same value you are typing just below the input field. So now it should be a Controlled component Right? as we did write some code to handle changes and display.

Wait !! , just see another version of the above code

import React, { useState } from 'react';

const Foo= () => {
  const [value, setValue] = useState('Hello world!');

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

  return (
    <div>
        Input:  <input type="text" onChange={handleChange} />
      <span>
          Output: {value}
      </span>
    </div>
  );
};

export default Foo;

Now when the application starts, you will see Hello world! in span and nothing in the input field but as soon as you start typing you can see the same values at both places. So we can't really say that this component is controlled because of the different values at the start of the application due to the initial state defined in useState('Hello World!').

One more thing to notice here, when you start typing we see the same values, but Is there is the same source of truth?

No. input receives the value from the internal state of the DOM node. and span received the value from React State.

2. Controlled component

We will now change the above Uncontrolled component to Controlled component by

import React, { useState } from 'react';

const Foo= () => {
  const [value, setValue] = useState('Hello React');

  const handleChange = event => setValue(event.target.value);

  return (
    <div>
      Input: <input type="text" value={value} onChange={handleChange} />
     <span>
        Output: {value}
      </span>
    </div>
  );
};

export default Foo;

giving the value property to the input tag (like props). Now the both the input and span having the same source of truth and they are synchronized with the React State.

Now if start the application you can see the same value at the start and even after you start typing.

In a nutshell

Controlled component: A Controlled Component is which takes its current value through propsand notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component

Uncontrolled component:: A Uncontrolled Component is one that stores its own state internally, and you can find the value from DOM using a ref. This is kind of normal HTML behavior.

Thanks For Reading !!

via GIPHY

Cover Credit: CoverView by Rutik Wankhade