Discourage using controlled inputs in React Native because they are broken

[gaearon]

I don't know what else to do.

Basic controlled text editing is broken in React Native.

For example:

import {useState} from 'react';
import {TextInput} from 'react-native';

let App = () => {
  const [value, setValue] = useState('');
  return (
    <TextInput
      style={{marginTop: 200, padding: 100, fontSize: 20}}
      placeholder="Edit me"
      onChangeText={text => setValue(text)}
      value={value}
    />
  );
};
export default App;

This is literally the simplest controlled text example you can think of.

However, React Native is not able to correctly handle if I type fast enough:

oh_no.mov

(The cursor should not lag behind typing — it causes incorrect user input.)

This is not a theoretical bug. We have it in production. It's embarrassing. Many kinds of bugs are tolerable, but this is a "hello world" example and it's broken. This is contributing to the perception that React Native is incapable of producing high quality native apps. I haven't figured out a way to convince the team to prioritize this, so maybe it should just be deprecated.

Why put it in the docs? We need to rip out all controlled inputs from the app, and I think other teams using RN or choosing to adopt it should be aware of this issue. (We've previously reported it in April.) It's not a fun thing to discover when you already have a lot of existing code. It's better to know early.

This is also far from the only bug related to controlled inputs. Here's another one I just ran into today: facebook/react-native#46850. That's actually what pushed me over the line to file this issue.

The typical workaround is to use defaultValue and avoid controlled inputs completely — it should be a recommendation if this cannot get prioritized.

I know there's been a focus on the team on getting things fixed with the New Architecture. That's understandable. However it's equally broken in the New Architecture.

fabric.mov

I know it takes a lot to develop the framework and this issue may simply not be enough of a priority but I think it's important to communicate honestly when one of the most fundamental features is broken at the "hello world" level.

Hence, this PR.

Thanks for consideration.

[netlify]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	6bf4309
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/6701157527184d0008ff43e3
😎 Deploy Preview	https://deploy-preview-4247--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[gaearon]

Eh, I don't know why the edit isn't showing up in the docs page preview. Would appreciate pointers.

[magus]

I’m on an old version of react-native (0.61.5) which doesn’t seem to repro on iOS 18. Could this be a regression?

[gaearon]

Yeah I think it might've regressed a few times. See facebook/react-native#44157 for current findings.

[goguda]

I’m on an old version of react-native (0.61.5) which doesn’t seem to repro on iOS 18. Could this be a regression?

We’re on 0.75.3 in production and I was just able to reproduce this on iOS 18. Not on new architecture but are using Hermes.

I had to type really fast and I only saw it happen once over the span of several minutes of typing. But it does seem to be an actual problem. Interesting.

[Simek]

Eh, I don't know why the edit isn't showing up in the docs page preview. Would appreciate pointers.

Hey Dan, you have altered only the unversioned doc, which means that changes will be only present in the "Next" docs version:

• https://deploy-preview-4247--react-native.netlify.app/docs/next/textinput#value

If you want to alter the documentation for already released version, the change need to be applied for a given versioned file:

• https://github.com/facebook/react-native-website/tree/main/website/versioned_docs

[andreialecu]

Suggested change

	> The `value` field implementation is broken in many subtle ways and is not recommended for use. Until these bugs are fixed, we recommend sticking with `defaultValue` and uncontrolled inputs.
	> The `value` field implementation is broken in many subtle ways and is not recommended for use. Until these bugs are fixed, we recommend sticking with `defaultValue` and uncontrolled inputs. See: [#4247](https://github.com/facebook/react-native-website/pull/4247)

Just something I usually like to see attached to these sort of warnings, some sort of issue or link where I can dig deeper.

[rodperottoni]

I'd like to point out that a lot of people would't know what a "controlled" component is. Introducing this word into the docs might bring a lot of ?'s into the brains of beginners. Should the maintainers perhaps give a brief explanation or point to relevant docs on controlled/uncontrolled components?

[mary-ext]

React docs has a section on controlled/uncontrolled
https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components

[rodperottoni]

Great! :)

[goguda]

So, if you need to change the value of the input programmatically, are you pretty much stuck using the value prop for this case? For example, clearing a password field on wrong password attempt?

[andreialecu]

So, if you need to change the value of the input programmatically, are you pretty much stuck using the value prop for this case? For example, clearing a password field on wrong password attempt?

See:
https://reactnative.dev/docs/direct-manipulation#setnativeprops-to-edit-textinput-value

[goguda]

So, if you need to change the value of the input programmatically, are you pretty much stuck using the value prop for this case? For example, clearing a password field on wrong password attempt?

See: https://reactnative.dev/docs/direct-manipulation#setnativeprops-to-edit-textinput-value

Awesome did not know about this, thank you!

[rodperottoni]

I'd like to point out that a lot of people would't know what a "controlled" component is. Introducing this word into the docs might bring a lot of ?'s into the brains of beginners. Should the maintainers perhaps give a brief explanation or point to relevant docs on controlled/uncontrolled components?

Bro do you even work? It's like asking to put some JSX or hooks explanation there because people might now know what is it. Controlled/Uncontrolled components are typical Junior React Developer interview questions, how did you miss that?

Your behaviour is similar to what I've seen in a lot of cocky mid/senior developers who forgot where they started during my 12 years of app development. It's also the reason a lot of them are stuck as developers and will always need a leader to tame their ego.

Implied knowledge is difficult. Common sense says that if you can make someone else's life easier, then why wouldn't you? In this case, seems like this was already addressed in another doc. End of story.

Have some respect, kid.

[maheshmuttintidev]

I'd like to point out that a lot of people would't know what a "controlled" component is. Introducing this word into the docs might bring a lot of ?'s into the brains of beginners. Should the maintainers perhaps give a brief explanation or point to relevant docs on controlled/uncontrolled components?

Bro do you even work? It's like asking to put some JSX or hooks explanation there because people might now know what is it. Controlled/Uncontrolled components are typical Junior React Developer interview questions, how did you miss that?

Your behaviour is similar to what I've seen in a lot of cocky mid/senior developers who forgot where they started during my 12 years of app development. It's also the reason a lot of them are stuck as developers and will always need a leader to tame their ego.

Implied knowledge is difficult. Common sense says that if you can make someone else's life easier, then why wouldn't you? In this case, seems like this was already addressed in another doc. End of story.

Have some respect, kid.

Very reasonable reply mate, I like your reply. There are many senior developers miss very basic things sometimes. It's not an issue when that is addressed by giving proper references, so that they can learn. We all know, we are all lifetime learners ✨.

[mahishdino]

@gaearon weird behaviour over texts

[elicwhite]

Thanks for the report and reproducer. We can confirm that this reproduces, including in our products at Meta. It seems to be an iOS-specific issue. A recent iOS release made our current Controlled TextInput experience worse, specifically due to how Apple’s new predictive text / autocorrect features work.

This error shows up more frequently when using React Native on a device with a hardware keyboard (simulator, attached keyboard to device, desktop) that allows you to type significantly faster than on touchscreens, and on older devices where the CPU is slower.

We kicked off an investigation into the root cause of the regression and what would be required to fix it. @NickGerleman from our team at Meta has a fix up here, with deep investigation into the problem: facebook/react-native#46970. We will be working to validate that PR in our products at Meta before merging. As such, and as TextInput is intended to work in this mode, I’m going to close out this website PR.

[gaearon]

Fantastic work, thank you!

[Guseyn]

It's ironic how a framework designed to minimize re-renders causes a text input to re-render on every keystroke. Reactivity is a joke.