Switch Component intermittently not responding

[hailey822]

Problem Description

Switch component is not responding to click intermittently

RNSwitchFailure_Trim.mp4

Steps To Reproduce

1. Install Sample project following the guideline https://microsoft.github.io/react-native-windows/docs/getting-started#install-react-native-for-windows
2. Place switch component to test following sample code https://reactnative.dev/docs/switch

Expected Results

Switch component to respond all the time

CLI version

npx react-native --version

Environment

System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-1235U
    Memory: 6.90 GB / 15.68 GB
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.17134.0, 10.0.17763.0, 10.0.18362.0, 10.0.19041.0, 10.0.22000.0
  IDEs:
    Android Studio: Not Found
    Visual Studio: 16.11.32802.440 (Visual Studio Community 2019)
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.67.2 => 0.67.2
    react-native-windows: 0.67.17 => 0.67.17
  npmGlobalPackages:
    *react-native*: Not Found

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

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

No response

[jonthysell]

RNW uses the XAML ToggleSwitch control, which also exhibits this behavior if you click fast enough. So this might not be RNW specific.

This may be exacerbated by running a Debug build. Does this repro in Release?

[rozele]

I believe this may have to do with the fact that it's a controlled component. There should probably be a native event count (similar to the eventCount prop on TextInput) to ensure that stale JS update does not overwrite a recent update from native.

I think what can happen is:

1. User toggles Switch
2. Native component fires onChange event to JS
3. onChange updates "native" state and forces re-render:
   https://github.com/facebook/react-native/blob/main/Libraries/Components/Switch/Switch.js#L165
4. setValue command is called (possibly*):
   https://github.com/facebook/react-native/blob/main/Libraries/Components/Switch/Switch.js#L182
5. User attempts to toggle again
6. setValue command processes after user toggles, resetting the value

I think this would happen if assuming state setters aren't batched, but IIRC they are, so it wouldn't make a lot of sense that step 4 would fire the command (assuming the native state update matches the value update in the same batch).

[microsoft-github-policy-service]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

[microsoft-github-policy-service]

This pull request has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

[hailey822]

I have tried reproduction steps listed above and debugged.
https://github.com/facebook/react-native/blob/main/Libraries/Components/Switch/Switch.js#L168
Even without calling setValue, intermittently Switch toggle failed.

[hailey822]

Somehow, https://github.com/facebook/react-native/blob/main/Libraries/Components/Switch/Switch.js#L162
handleChange doesn't get fired sometimes

[chrisglein]

Not something we plan to address on the Paper renderer as we move towards Fabric.
Fabric will not use XAML for the fundamentals here, so this isn't necessarily applicable. Track here: #11163