24. What are controlled and uncontrolled components in React?
medium

Controlled and uncontrolled components are fundamental concepts in React that help manage state and input values.


What is a Controlled Component?

A controlled component is a type of React component where the value of an input field is controlled by the parent component. This means that the parent component manages the state of the input field, and the child component (the input field) receives updates from the parent.

How Does a Controlled Component Work?

Here's a step-by-step explanation:

  1. Parent Component Updates State: The parent component updates its internal state with the new value.
  2. Child Component Receives Update: The child component receives the updated props from the parent, which includes the new value for the input field.
  3. Child Component Updates Input Field: The child component uses the new prop to update the input field's value.

Example of a Controlled Component

import React, { useState } from 'react';

function MyInput() {
    const [value, setValue] = useState('');

    return (
        <input
            type="text"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            placeholder="Enter your name"
        />
    );
}

export default function App() {
    const [name, setName] = useState('');

    return (
        <div>
            <MyInput value={name} onChange={(value) => setName(value)} />
            <p>Hello, {name}!</p>
        </div>
    );
}

What is an Uncontrolled Component?

An uncontrolled component is a type of React component where the value of an input field is managed by the DOM itself. This means that the parent component does not manage the state of the input field, and the child component (the input field) updates its own internal state.

How Does an Uncontrolled Component Work?

Here's a step-by-step explanation:

  1. User Interacts with Input Field: The user interacts with the input field to update its value.
  2. Input Field Updates Its Own State: The input field updates its own internal state with the new value.
  3. Parent Component Can Access Updated Value: The parent component can access the updated value of the input field using a ref or other methods.

Example of an Uncontrolled Component

import React, { useRef } from 'react';

function MyInput() {
    const inputRef = useRef(null);

    return (
        <input type="text" ref={inputRef} placeholder="Enter your name" />
    );
}

export default function App() {
    const [name, setName] = useState('');

    return (
        <div>
            <MyInput />
            <p>Hello, {name}!</p>
        </div>
    );
}

Note

  • Use cases for controlled and uncontrolled components: Choose controlled components when you need to manage the state of an input field in a parent-child relationship. Use uncontrolled components when you don't need to manage the state of an input field or when performance is critical.
  • Customize component behavior: Adapt the component behavior to fit your specific use case and application requirements.

Conclusion

In summary, controlled components are managed by their parents, while uncontrolled components manage themselves. Understanding the difference between these two types of components will help you make informed decisions about how to structure your React applications.

PreviousNext