ATADE Vanique's Blog
Understanding Controlled and Uncontrolled Inputs in React.js

Understanding Controlled and Uncontrolled Inputs in React.js

ATADE Vanique's photo
ATADE Vanique
·

3 min read

Table of contents

Introduction

React.js is a popular JavaScript library for building user interfaces, and it provides developers with the flexibility to manage form inputs using controlled and uncontrolled components. Understanding the difference between controlled and uncontrolled inputs is essential for creating efficient and maintainable React applications. In this article, we will delve into the details of controlled and uncontrolled inputs, their differences, use cases, and best practices.

Controlled Inputs In React

A controlled input is a form element whose value is controlled by the component's state. This means that the value of the input is set by the component's state, and any changes to the input are handled by updating the state. Controlled inputs are managed entirely by React, and their value is always synchronized with the component's state.

import React, { useState } from 'react';

function ControlledInputExample() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <input type="text" value={inputValue} onChange={handleInputChange} />
  );
}

In the above example, the value of the input is controlled by the inputValue state variable. Any changes to the input value trigger the handleInputChange function, which updates the state with the new value. This ensures that the input value is always in sync with the component's state.

Uncontrolled Inputs

On the other hand, an uncontrolled input is a form element whose value is managed by the DOM. In React, uncontrolled inputs do not rely on the component's state to manage their value. Instead, they allow the DOM to handle the input value directly.

import React from 'react';

function UncontrolledInputExample() {
  const inputRef = React.createRef();

  const handleButtonClick = () => {
    console.log('Input value:', inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleButtonClick}>Get Input Value</button>
    </div>
  );
}

In the above example, the input element uses the ref attribute to access the DOM node, and the input value is retrieved directly from the DOM using inputRef.current.value when the button is clicked. This demonstrates the uncontrolled nature of the input, as React does not manage its value.

Differences and Use Cases

The main difference between controlled and uncontrolled inputs lies in how their values are managed. Controlled inputs rely on the component's state to manage the input value, while uncontrolled inputs allow the DOM to handle the input value directly.

Controlled inputs are ideal for scenarios where the input value needs to be manipulated or validated by React, such as form submissions, input masking, or dynamic input handling. They provide a single source of truth for the input value, making it easier to implement complex logic and maintain consistent behavior.

Uncontrolled inputs, on the other hand, are suitable for cases where direct access to the DOM is necessary, or when integrating with third-party libraries that require access to the raw DOM elements. They are useful for simple input scenarios where React's state management may not be necessary.

Best Practices

When working with forms in React, it is essential to choose the appropriate input type based on the specific requirements of the application. Here are some best practices for using controlled and uncontrolled inputs:

  • Use controlled inputs for dynamic form handling, validation, and complex input logic.

  • Use uncontrolled inputs for simple input scenarios or when direct access to the DOM is required.

  • Avoid mixing controlled and uncontrolled inputs within the same form for consistency and maintainability.

Conclusion

Understanding the difference between controlled and uncontrolled inputs in React.js is crucial for developing efficient and scalable user interfaces. By choosing the right input type based on the specific use case, developers can build robust and maintainable forms while leveraging the full power of React's declarative approach to UI development. Whether it's controlled inputs for dynamic form handling or uncontrolled inputs for direct DOM access, React provides the flexibility to cater to a wide range of input scenarios.

ReactFrontend Developmentfrontendframework