Value is being updated while picking

The problem: value props is being updated, even if picker is open. The use case is below.

The component:

function MyComponent ({ onChange, mode }) {
  const [value, setValue] = useState(new Date());

  useEffect(() => {
     setTimeout(() => setValue(new Date(+ value + 60 * 60 * 1000)), 5000);
   }, []);

  return (
    <DateTimePicker
    value={value}
    mode={mode}
    onChange={onChange}
  />
  );
}

The scenario:

1. <MyComponent mode="time" onChange={...} /> is rendered
2. During first 3 seconds, pick hours and wait on minutes screen
3. Wait another 2 seconds
4. Selected hours suddenly has been changed

Environment info

Tested only on Android

react-native info output:

System:
    OS: Windows 10 10.0.19041
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 4.55 GB / 15.85 GB
  Binaries:
    Node: 12.18.0 - ~\AppData\Local\Temp\yarn--1596125151497-0.3420221356958104\node.CMD
    Yarn: 1.22.4 - ~\AppData\Local\Temp\yarn--1596125151497-0.3420221356958104\yarn.CMD
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Version  3.6.0.0 AI-192.7142.36.36.6392135
  Languages:
    Java: Not Found
    Python: 2.7.16 - /c/Python27/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: ~0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 2.6.1

[lukemcgregor]

Im also having this problem using the downstream component react-native-modal-datetime-picker. See https://github.com/mmazzarolo/react-native-modal-datetime-picker/issues/451

Ive looked at the code and from what I can tell every render it will call picker.open() which I’m guessing is causing the issue. This should only be called once (on initial render). https://github.com/react-native-community/datetimepicker/blob/master/src/datetimepicker.android.js#L46

Maybe put this inside a useEffect or similar which only executes on initial load (or perhaps value change).

This issue would also be able to be worked around if onChange was called every time that the user clicks a date in the UI (its currently only called on clicking ok). This would mean that the latest value could be passed back into the component (so when it re-called open it would at least do so with the latest date the user selected)

[alex-golubtsov]

The snack you sent us does show some wacky behavior - after I make a selection, it gets reverted almost immediately.

Yep, this is exactly the problem 😃

Can you explain your use case? Why do you need to set value using a hook, which gets executed repeatedly, every time the render() function gets invoked?

I have kind of digital clock app. Something like:

function Clock() {
  const timestamp = useTime();
  const { hours, minutes, seconds } = parseTimestamp(timestamp);
  ...
  return (
     ...
     <TouchableOpacity onPress={showPicker}>
         <Text>{hours}:{minutes}:{seconds}</Text>
     </TouchableOpacity>
     {pickerVisible && <Picker .... />}
     ...
  );
}

In this example useTime hook is being updated each second, which means whole Clock component is also being updated each second.

It should be possible for user to “jump in time” (+/- a couple of hours) by click on <TouchableOpacity>. And this is where everything breaks. User sees the picker, but cannot select any time from it.