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

Inizia con l’esempio minimo riproducibile collegato e segui la sequenza indicata: inserisci del testo, cancella l’input, quindi inserisci nuovamente del testo subito dopo. Riproduci la discrepanza con e senza il rallentamento artificiale, quindi traccia il percorso di sincronizzazione di React Native TextInput. Il lavoro è completato quando i valori nativi e i valori React rimangono coerenti e la riproduzione non restituisce più "abcde" invece di "e".