Open In App

Controlled vs Uncontrolled Components in ReactJS

Improve
Improve
Like Article
Like
Save
Share
Report

In React, Controlled components refer to the components where the state and behaviors are controlled by Parent components while Uncontrolled components are the ones having control of their own state and manage the behaviors on themselves.

Uncontrolled Components

Uncontrolled Components are the components that are not controlled by the React state and are handled by the DOM (Document Object Model). So in order to access any value that has been entered we take the help of refs.

For instance, if we want to add a file as an input, this cannot be controlled as this depends on the browser so this is an example of an uncontrolled input.

Steps to create the project:

Step 1: Create the react app using the following command:

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command:

cd project

Project Structure:

Example: We are creating a simple form that comprises an input field with a label name and a submit button with an onSubmit function that triggers when we submit the form. We are accessing the name we have filled using useRef.

App.js




// FileName - App.js
 
import React, { useRef } from "react";
import "./App.css";
 
function App() {
    const inputRef = useRef(null);
 
    function handleSubmit() {
        alert(`Name: ${inputRef.current.value}`);
    }
 
    return (
        <div className="App">
            <h1 className="geeks">GeeksForGeeks</h1>
            <h3>Uncontrolled Component</h3>
            <form onSubmit={handleSubmit}>
                <label>Name :</label>
                <input
                    type="text"
                    name="name"
                    ref={inputRef}
                />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: This output will be visible on http://localhost:3000/ in the Web browser.

Peek-2023-10-10-12-14

Controlled Components

In React, Controlled Components are those in which form’s data is handled by the component’s state. It takes its current value through props and makes changes through callbacks like onClick, onChange, etc. A parent component manages its own state and passes the new values as props to the controlled component.

Example: We are creating a state name that stores the value we enter into the input field using the useState hook. We are creating an onChange function in the input field that stores the data we are entering in the input field to our state. There is another function handleSumit that gets triggered when we submit the form and it shows the name we have entered on the alert box.

App.js




// FileName - App.js
 
import { useState } from "react";
import "./App.css";
 
function App() {
    const [name, setName] = useState("");
 
    function handleSubmit() {
        alert(`Name: ${name}`);
    }
 
    return (
        <div className="App">
            <h1 className="geeks">GeeksForGeeks</h1>
            <h3>Controlled Component</h3>
            <form onSubmit={handleSubmit}>
                <label>Name:</label>
                <input
                    name="name"
                    value={name}
                    onChange={(e) =>
                        setName(e.target.value)
                    }
                />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: This output will be visible on http://localhost:3000/ in the Web browser.

Peek-2023-10-10-12-25

Difference between Controlled and Uncontrolled Components

Controlled  Component

Uncontrolled Component

The component is under control of the component’s state. Components are under the control of DOM.
These components are predictable as are controlled by the state of the component. Are Uncontrolled because during the life cycle methods the data may loss
Internal state is not maintained Internal state is maintained
It accepts the current value as props We access the values using refs
Does not maintain its internal state. Maintains its internal state.
Controlled by the parent component. Controlled by the DOM itself.
Have better control on the form data and values Has very limited control over form values and data


Last Updated : 11 Oct, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads