[React] What is Controlled/Uncontrolled Component?

React provides developers with two main approaches for managing form elements: controlled components and uncontrolled components.

---

1. Contorlled Component

A controlled component is a form element whose value is controlled by the state. This means that the component's value is solely determined by the React state, and any changes to the value are handled through React state management(setState()).

Here is an example:

import { useState } from 'react';

const ControlledComponent = () => {
    const [name, setName] = useState('');

    const handleSubmit = e => {
        e.preventDefault();
        alert(`Your name is ${name}`);
    };

    const nameChangeHandler = e => {
        e.preventDefault();
        setName(e.target.value);
    };

    return(
        <form onSubmit={handleSubmit}>
            <input 
                 type="text"
                placeholder="Enter Name"
                value={name}
                onChange={nameChangeHandler}
            />
            <button>Add</button>
        </form>
    );
};

export default ControlledComponent;

In this example, the input value is controlled by the name state. The nameChangeHandler function updates the state whenever the input value changes.

Whenever an input value is generated, the state is updated and always keeps up to date. It means the data and the value input from the UI are always synchronized.

---

2. Uncontrolled Component

An uncontrolled component, allows the DOM to handle the form element's state. The value of an uncontrolled component is not directly managed by React state. Instead, it is handled by the DOM itself. To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.

Here is an example:

import { useRef } from 'react';

const UncontrolledComponent = () => {
    const inputRef = useRef();

    const handleSubmit = () => {
      const name = inputRef.current.value;
      alert(`Your name is ${name}`);
    };

    return(
        <form onSubmit={handleSubmit}>
            <input 
                 type="text"
                placeholder="Enter Name"
                ref={inputRef}
            />
            <button>Add</button>
        </form>
    );
};

export default UncontrolledComponent;

In this example, the inputRef is used to access the value of the uncontrolled input. React does not manage the value, and the DOM directly handles any changes.

The value is unknown until you click the form button. You can only get the value by clicking the button.

---

When to use Controlled/Uncontrolled Component?

- Use Controlled Component When:

• You need to perform actions on the input value before rendering it.

• You want to enforce input constraints or formatting.

- Use Uncontrolled Component When:

• You want to reduce unnecessary re-rendering.

• You want a simpler integration with non-React code.