Controlled vs. Uncontrolled Components in React.js: Demystified

When working with React.js, one of the concepts that often puzzles beginners is the distinction between "controlled" and "uncontrolled" components. Both of these approaches deal with form inputs and how their values are handled, but they operate in fundamentally different ways. In this article, we'll explore these two concepts and help you decide which one to use based on your specific needs.

1. Controlled Components:

In a controlled component, the form input's value is managed by the React state. This means:

• The input's value is set by the component's state.
• Any changes to the input will update the state.
• The component "controls" the input and its value.

Example:

class ControlledComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { inputValue: '' };
    }

    handleChange = (event) => {
        this.setState({ inputValue: event.target.value });
    }

    render() {
        return (
            <input
                type="text"
                value={this.state.inputValue}
                onChange={this.handleChange}
            />
        );
    }
}

Pros:

• Predictability: The input's value is always known and consistent.
• Flexibility: You can manipulate the value or add validations before updating the state.

Cons:

• Boilerplate: Requires additional code to set up the state and handlers.

2. Uncontrolled Components:

In an uncontrolled component, the form input's value is managed by the DOM itself, not by the React state. This means:

• The input's value is determined by what the user types or selects.
• React does not track or update the input's value.
• To get the input's value, you'd access it directly from the DOM, usually using a ref.

Example:

class UncontrolledComponent extends React.Component {
    constructor(props) {
        super(props);
        this.inputRef = React.createRef();
    }

    handleSubmit = () => {
        alert("Input value: " + this.inputRef.current.value);
    }

    render() {
        return (
            <div>
                <input type="text" ref={this.inputRef} />
                <button onClick={this.handleSubmit}>Submit</button>
            </div>
        );
    }
}

Pros:

• Simplicity: Fewer lines of code, as you're not managing the input's value in the component's state.
• Native Behavior: The input behaves just like it would outside of a React environment.

Cons:

• Less Control: You don't have as much control or flexibility over the input's behavior.
• Direct DOM Access: Accessing the DOM directly can be less idiomatic in React.

So, Which One Should You Use?
The choice between controlled and uncontrolled components boils down to your requirements:

If you need precise control over the input's behavior, validation, or value manipulation, then controlled components are the way to go.

If you're looking for a simpler setup and are okay with letting the DOM manage the input's value, then uncontrolled components might be a better choice.

Conclusion
In React, both controlled and uncontrolled components have their own sets of advantages and trade-offs. Understanding the difference between them and when to use each is crucial for building efficient and user-friendly applications. Ultimately, the choice is yours, but hopefully, this guide has made that decision a bit clearer.