Skip to content

Discourage using controlled inputs in React Native because they are broken #4247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
gaearon wants to merge 1 commit into from
Closed

Discourage using controlled inputs in React Native because they are broken #4247

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/textinput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -995,6 +995,8 @@ The color of the `TextInput` underline.

### `value`

> 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.

@andreialecu andreialecu Oct 6, 2024 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.

| Type |
Expand Down