Let’s understand Controlled vs unControlled components in React.

In React.js we use component-based architecture these components are the building blocks of a React application.

We can also create reusable components to make our React application efficient.

Let’s understand what is a controlled component in React and what is an uncontrolled component in React with examples. | (Controlled VS uncontrolled component)

Controlled Component in React JS

Inside a controlled component each of the elements has its own state, which helps to detect the changes and update the elements on User Interface.

for example, in the below piece of code, we have an App Function that is detecting changes using the useState Hook and updating the value on the onChange event.

So there is no direct access to the core HTML elements like we usually do by getting id in javascript and assigning it values by innerHTML methods.

Here we manage the state for the element and every action is happening through the useState hook, which is basically used for state management.

Example code for controlled Component in React JS

import './App.css';
import { useState } from 'react';

function App() {
  const [input,setInput]=useState("");
  const submitForm=(e)=>{
    e.preventDefault();
    console.log(input)
  }
  return (
    <div className="App">
      <form onSubmit={submitForm}>
        <input
          value={input}
          onChange={event=>setInput(event.target.value)}

          type="text"
        />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;

Now you have a better understanding that controlled components have a proper state to detect changes in each element.

UnControlled Component in React JS

Opposite to controlled components, An uncontrolled component has direct access to the HTML elements and basically in react we achieve this by using useRef Hook. So whenever you see useRef being used inside a component, you can say it’s an uncontrolled state component.

So basically in the controlled state component example, we are managing our form elements from inside the state, but in the case of an uncontrolled state component, we manage our form elements outside the state.

Example code for UnControlled Component in React JS

import { useRef } from 'react';
import './App.css';

function App() {
  const inputTitle=useRef();
  const submitForm=(e)=>{
    e.preventDefault();
    const title= inputTitle.current.value;
    console.log(title)
  }
  return (
    <div className="App">
      <form onSubmit={submitForm}>
        <input
          ref={inputTitle}
          type="text"
        />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;

Now, In the above code you can see that we are not using useState and using useRef Hook, useRef hook helps to directly access the HTML element and its events.

So here we are directly accessing the value from the input field using the useRef hook and getting its value by current. value property.

So this was an example of controlled component in react and uncontrolled component in react or we can say controlled vs uncontrolled components in react.

Here you can read how you can pass data between components.

If you like this article, share it with your friends. Happy Coding 🙂