TextInput desynchronizes with its native counterpart

Description

React TextInput component can go "out of sync" with the native text input widget. The desynchronization can be triggered by quick user interactions. The problem becomes severe when the efficiency of the application code is not perfect; in this case, the user's interactions don't have to be quick to trigger the desynchronization.

The React TextInput component eventually re-synchronizes with its native counterpart, but the user experience and application behavior are affected.

See "Steps to reproduce" for the example and details.

React Native Version

0.71.7

Output of npx react-native info

System:
OS: macOS 13.3
CPU: (12) arm64 Apple M2 Max
Memory: 13.88 GB / 64.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.12.0 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.9787799
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 18.0.2 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.7 => 0.71.7
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Let's consider the example app, which consists of a TextInput component and a "Clear input" button, which clears the text input. A real-life case would be a chat app with a "Send" button.

This is a Git repository with the MCVE.

1. Type something into the text input, for example, "abcd"
2. Press "Clear input", but immediately after that type some letter, let's say "e" (it's easier on an emulator, but possible on a physical device too, especially if it has an older CPU)
3. Observe the text input content
   • Expected content: "e"
   • Actual content (if the problem is reproduced): "abcde"

Screen recording:

https://github.com/facebook/react-native/assets/2590174/79249e94-b45a-43c7-a50d-8c17fdbe2e95

If the performance of the application JavaScript code is not-so-good, at step 2. you don't have to type the next letter immediately. If the task in which the TextInput is cleared takes 200 ms, the window to trigger the unexpected behavior will have 200 ms.

You can experiment with the performance implications in the provided MCVE by enabling the "Slow down" switch. It will artificially slow down the render by adding an extra computation.

Screen recording with non-ideal performance:

https://github.com/facebook/react-native/assets/2590174/2bac65c7-623a-4666-a05e-b7d0f289a4e5

Snack, code example, screenshot, or link to a repository

https://github.com/cubuspl42/react-native-TextInput-sync-issue-mcve-1

从链接的最小可复现示例开始，并按照列出的顺序操作：输入文本，清空输入内容，然后立即再次输入。分别在有和没有人为减速的情况下复现不一致问题，然后跟踪 React Native TextInput 的同步路径。当 native 值和 React 值保持一致，且复现结果不再是 "abcde" 而不是 "e" 时，即表示完成。