有两个状态更新同时发生，并且与React呈现UI reconciliation冲突
1.计时器结束时，Chronometer组件内的setRunning(false)将重新呈现此组件。
1.计时器结束时，WorkoutScreen组件内的setInRest(false)也将重新呈现。
这两种重新呈现在同一计时器中发生，并且WorkoutScreen重新呈现由子组件触发。
解决方案是避免由子组件引起的父组件内部的状态改变。

const WorkoutScreen = ({
  navigation,
  route,
}: RootStackScreenProps<"Workout">) => {
  const [restTime, setRestTime] = useState(5);

  //I pass it to child
  const handleEndRestTime = () => {
    // Handle logic when workout time end
  };
  //

  return (
    <Layout style={styles.container}>
      <Chronometer onEnd={handleEndRestTime} seconds={restTime}></Chronometer>
    </Layout>
  );
};

const Chronometer = ({ seconds, onEnd }: Props) => {
  const [timer, setTimer] = useState < number > seconds;
  const [pause, setPause] = useState(false);
  const [running, setRunning] = useState(true);
  const [inRest, setInRest] = useState(false);

  useEffect(() => {
    let interval: NodeJS.Timer;
    if (pause === true || running === false) {
      () => clearInterval(interval);
    } else {
      interval = setInterval(() => {
        setTimer((timer) => timer - 1);
      }, 1000);
    }
    return () => {
      clearInterval(interval);
    };
  }, [pause, running]);

  if (timer === 0 && running === true) {
    setRunning(false);
    setInRest(false);
    //From parent
    onEnd();
    //
  }

  return (
    <View style={styles.container}>
      <Button
        onPress={() => {
          setInRest(!inRest);
        }}
      >
        Trigger chronometer
      </Button>

      {inRest && (
        <View style={styles.chronometer}>
          {/* Show Timer counter only when is running */}
          {running && (
            <View style={styles.controls}>
              <Text>{formatHhMmSs(timer)}</Text>
            </View>
          )}

          <Button
            onPress={() => {
              setPause(!pause);
            }}
          >
            {running ? "Pause" : "Start"}
          </Button>
        </View>
      )}
    </View>
  );
};