Controlled vs Uncontrolled Inputs in React.js: A Known Challenge with TextInput in React Native

December 4, 2024 (3mo ago)

Live as if you were to die tomorrow. Learn as if you were to live forever.

[— Mahatma Gandhi]

In React.js, managing form inputs and user interactions plays a vital role in creating dynamic web applications.

Two fundamental approaches that developers should grasp are controlled and uncontrolled components. These methods determine how form data is managed within a React component.

Controlled components depend on React state for handling form data, while uncontrolled components utilize the DOM to manage the input values directly.

In this post, we’ll delve into the distinctions between controlled and uncontrolled components, demonstrate how to implement them, and share best practices for leveraging each method effectively in your React applications.

What Are Controlled Components?

Controlled components are form elements (such as input, textarea, or select) where their values are governed by React's state. In this setup, the component’s value is derived from state and updated through React, making React the sole source of truth for the form data.

Managing form elements through state provides greater control over user interactions, simplifies validation, enables data formatting, and allows seamless handling of changes.

Here's an example of a controlled component:

// Next.js example: page.tsx
 
'use client';
 
import { useState } from 'react';
import { createUser } from '../actions/user.action';
 
export default function Page() {
  const [email, setEmail] = useState('');
 
  return (
    <form action={createUser}>
      <input
        name="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
        required
      />
    </form>
  );
}

in above example:

  • The input element which is email input is controlled by React state
  • setEmail is a setter function that updates the state whenever user types in the input
  • email is the state variable that holds the value of the input

How Do Controlled Components Work?

In React, controlled components handle form data through React state, offering a reliable and predictable method for managing user input.

How Do Controlled Components Work? In React, controlled components handle form data through React state, providing a reliable and predictable way to manage user input. With this approach, the form's input values are controlled by React, ensuring synchronization between the state and the UI.

Here’s an overview of how controlled components work:

  • State Management: The form data is stored and managed in the component’s state. React state is responsible for holding the current value of the input field.

  • User Input Handling: Every change in the user input triggers an event handler, typically the onChange event. This handler listens for input updates and responds accordingly.

  • State Updates: The event handler updates the state with the new input value. This causes a re-render of the component, with the updated value being reflected in the input field.

This structured flow makes it easier to enforce validation, synchronize UI updates, and control user interactions effectively. Controlled components offer a reliable and straightforward method for managing form inputs in React. With React state controlling the values of input fields, dropdowns, checkboxes, and radio buttons, you can ensure seamless synchronization between the UI and the application state.

What Are Uncontrolled Components?

Uncontrolled components in React maintain their own state internally, independent of React's state management. This method is particularly suitable for simpler forms where direct manipulation of input data through React state is unnecessary.

Here's an example of a uncontrolled component:

// Next.js example: page.tsx
 
'use client';
 
import { useRef } from 'react';
import { createUser } from '../actions/user.action';
 
export default function Page() {
  const emailRef = useRef(null);
 
  return (
    <form action={createUser}>
      <input name="email" ref={emailRef} required />
    </form>
  );
}

in the above example:

  • Ref Usage: In uncontrolled components, the ref attribute is used to create a reference (e.g., this.inputRef in class component or ref={inputRef} in function component) to the DOM node of the input element.

  • Handling Input: When a user enters data and submits the form, this.inputRef.current.value or inputRef.current.value provides direct access to the input field’s current value, bypassing React state.

  • Advantages: Uncontrolled components are often simpler and faster for basic form handling, especially when form data doesn’t require React state for processing or validation.

React Native and Controlled Inputs: A Known Challenge and why TextInput seems broken

When working with controlled inputs in React Native, you may notice performance hiccups, especially in scenarios involving heavy computation or delays. This issue has been discussed widely, including by Dan Abramov (see the pr here), who highlighted how React Native’s handling of inputs can feel “broken” under certain conditions.

What’s Happening?

Controlled components rely on React state to manage input values. While this works well in most cases, React Native renders components differently compared to React for the web. Input latency becomes noticeable when the main thread is blocked, causing delays between a user typing and the input updating.

Here’s an example to simulate the delay:

function blockFor(ms: number) {
  const start = performance.now();
  while (performance.now() - start < ms) {
    // Busy loop to block the thread
  }
}
 
export default function App() {
  const [text, setText] = React.useState("");
 
  return (
    <TextInput
      value={text}
      onChangeText={(value) => {
        blockFor(200); // Simulating a delay
        setText(value);
      }}
      style={{
        height: 40,
        borderColor: "gray",
        borderWidth: 1,
        padding: 10,
      }}
    />
  );
}

see the result below:

Alt Text

When you type into the TextInput or any other controlled input, you’ll experience a noticeable delay because the thread handling the input is blocked.

Why Does This Happen?

  1. Main Thread Blocking: React Native runs the UI thread and JavaScript thread separately, but updates to controlled inputs require the JS thread to synchronize state with the UI thread.
  2. Overhead in Controlled Inputs: Every keystroke triggers a re-render, introducing additional latency when combined with other blocking tasks.

Should You Avoid Controlled Inputs?

Not necessarily. Controlled inputs are still a valid approach in many cases, but when performance is critical:

  • Use Uncontrolled Inputs: Let the native UI handle the input value and only access it when necessary.
  • Debounce State Updates: Reduce the frequency of state updates using debouncing.
  • Optimize Performance: Offload heavy computations to a worker thread or optimize your React Native app for smoother state updates.

Closing Thoughts

React Native’s controlled input challenge is a great reminder to carefully evaluate your use of state and performance implications. If you’ve run into this issue or have a creative solution, let’s discuss in the LinkedIn comments!

See yaa!

LinkedIn
X