Controlled vs. uncontrolled components in React

React, a popular JavaScript library for building user interfaces, offers two approaches for managing form inputs and state: controlled and uncontrolled components. Understanding the differences between these approaches is crucial for choosing the right strategy for React applications.

In this answer, we'll explore the differences between controlled and uncontrolled components in React and when to use each.

Controlled components

In a controlled component, form data is handled by a React component's state. The component renders a form element and controls what happens in that form on subsequent user input. The component's state is updated with each user input, and the component re-renders with the updated state.

Code Example

Explanation

Here's a line-by-line explanation for the code in App.js file:

Line 1: Imports the necessary modules.

Line 3: Defines a functional component called ControlledComponent.

Line 4: Initializes a state variable name and a setter function setName using the useState hook. The initial value of name is an empty string.

Line 6: Defines a function handleChange that updates the name state variable when the input value changes.

Line 10: Defines a function handleSubmit that prevents form submission from refreshing the page and displays an alert with the value of name upon submission.

Line 16: Renders a form with an event handler for submission.

Lines 17–20: Displays a label and an input field, with the input field being controlled by the name state variable.

Line 22: Renders a submit button.

Line 26: Exports ControlledComponent as the default export.

Advantages

Controlled components have the following advantages:

• They provide more control over the form data.

• They make it easier to implement complex validation and business logic.

• They make it easier to integrate React and non-React code.

Disadvantages

Controlled components have the following disadvantages:

• They require more code to implement.

• They can be slower than uncontrolled components for large forms.

• They can be more difficult to debug.

Uncontrolled components

In an uncontrolled component, the DOM handles the form data. The component renders a form element but does not control what happens in that form on subsequent user input. Instead, the form data is accessed directly from the DOM using a ref.

Code Example

Explanation

Here's a line-by-line explanation for the code in App.js file:

Line 1: Imports the necessary modules.

Line 3: Defines a functional component called UncontrolledComponent.

Line 4: Initializes a reference variable nameRef using the useRef hook, initially set to null. This reference will be used to access the input element directly.

Lines 6–8: Defines a function handleSubmit that prevents form submission from refreshing the page and displays an alert with the current value of the input element accessed through nameRef.current.value upon submission.

Line 12: Renders a form with an event handler for submission.

Line 13–16: Displays a label and an input field. The ref attribute is set to nameRef to access the input element directly without using state.

Line 17: Renders a submit button.

Line 26: Exports UncontrolledComponent as the default export.

Advantages

Uncontrolled components have the following advantages:

• They require less code to implement.

• They can be faster than controlled components for large forms.

• They can be easier to debug.

Disadvantages

Uncontrolled components have the following disadvantages:

• They provide less control over the form data.

• They make it more difficult to implement complex validation and business logic.

• They can be more challenging to integrate React and non-React code.

Choosing between controlled and uncontrolled components

The choice between controlled and uncontrolled components depends on your specific application requirements.

Here are some key factors to consider when choosing between controlled and uncontrolled components in React: