onValueChange randomly emitted every 8s on the new architecture

[kerwanp]

Environment

• react-native info output:

System:
  OS: Linux 6.11 Arch Linux
  CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
  Memory: 40.06 GB / 62.73 GB
  Shell:
    version: "5.9"
    path: /usr/bin/zsh
Binaries:
  Node:
    version: 21.7.3
    path: /tmp/xfs-8d4234c8/node
  Yarn:
    version: 4.4.0
    path: /tmp/xfs-8d4234c8/yarn
  npm:
    version: 10.5.0
    path: ~/.nvm/versions/node/v21.7.3/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK:
    API Levels:
      - "34"
      - "35"
    Build Tools:
      - 34.0.0
      - 35.0.0
    System Images:
      - android-32 | Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-34 | Google Play Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java:
    version: 21.0.5
    path: /usr/bin/javac
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0
    wanted: ^15.0.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.0
    wanted: 0.76.0
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

• are you using the new architecture?

Yes, this occurs using the new architecture.

• which version of react & react-native are you using?

• [email protected]
• [email protected]

Description

After upgrading to SDK52 with the new architecture, onValueChange is emitted without any user interaction at a regular interval. The error occurs on both Android and iOS (ok on web).

On iOS the interval is 10s and Android 8s. (And I have no idea why this is different and why it has a regular interval)

Reproducible Demo

Current time is a value that changes every second, the logs show that the onValueChange is called every 8 seconds.

const BottomBar = () => {
  const theme = useTheme();

  const { currentTime, duration } =
    usePlayerControls();

  const time = useRef(Date.now());
  function handleValueChange(v) {
    const curr = Date.now();
    console.log(`Value changed to ${v} after ${curr - time.current}ms`);
    time.current = curr;
  }

  return (
        <Slider
          style={{ cursor: "pointer" }}
          maximumTrackTintColor="rgba(255,255,255,0.4)"
          maximumValue={duration}
          minimumTrackTintColor={theme.primary.val}
          minimumValue={0}
          onValueChange={handleValueChange}
          thumbTintColor={theme.primary.val}
          value={currentTime}
        />
  );
};