Controlled and Uncontrolled Modes in React Components

React provides two main approaches for managing component state and handling user input through controlled and uncontrolled components. These approaches define how state is maintained and updated within a component or externally.

Understanding these approaches helps users to choose the right method for building interactive elements in React applications.

Controlled Components

A controlled component in React is an element whose value is fully managed by React state. The value is bound to a state variable, and updates are handled through an component's change event, making React the single source of truth.

Syncfusion^® React components follow this pattern for controlled behavior. When a user updates a value, the component triggers an onChange event and passes the new value to the handler, ensuring the component and state remain synchronized.

Below is the React TextBox component demonstrating controlled state management:

import { TextBox, TextBoxChangeEvent } from "@syncfusion/react-inputs";
import { useState } from "react";

export default function App() {
    const [value, setValue] = useState('John');
    const handleChange = (args?: TextBoxChangeEvent) => {
        if (args && args.value !== undefined) {
            setValue(args.value);
        }
    };

    return (
     <TextBox
      placeholder="Controlled"
      value={value}
      width="15.625em"
      labelMode="Auto"
      onChange={handleChange} />
    );
}

Uncontrolled Components

An Uncontrolled Component manages its own state internally within the DOM instead of storing the value in React state, a ref is used to directly access the component's current value when needed.

Below is the React TextBox component demonstrating uncontrolled state management, where the value is managed internally by the DOM and accessed via a ref when needed.

import { TextBox } from "@syncfusion/react-inputs";
import { useRef } from "react";

export default function App() {
    const textBoxRef = useRef<HTMLInputElement>(null);

    const handleClick = () => {
        if (textBoxRef.current) {
            alert(`Uncontrolled Component Value: ${textBoxRef.current.element.value}`);
        }
    };

    return (
     <div>
      <TextBox
        placeholder="Uncontrolled"
        width="15.625em"
        ref={textBoxRef}
        labelMode="Auto" />
      <button onClick={handleClick}>Get Value</button>
     </div>
  );
}

See also

• Controlled and Uncontrolled Components