React，如何检查状态是否在特定时间内保持在特定值？

Question

我有一个状态值，它可能会不时改变。我想要一个标志来指示“此状态一直保持在值 x 且在 y 时间内没有任何变化”

我如何实现这一目标？

P.S，如果你玩过《Oxygen Not Included》，这就是我想要的逻辑：https://oxygennotincluded.fandom.com/wiki/FILTER_Gate

Answer 1

https://stackblitz.com/edit/react-qjmyix?file=src%2FApp.js

import React, { useState, useRef, useEffect, useCallback } from 'react';

const useStateWithTimeFlag = (initValue) => {
  const [value, setValue] = useState(initValue);
  const [collapsedTime, setCollapsedTime] = useState(0);
  const timeRef = useRef(new Date());

  const getTime = useCallback(() => {
    return (new Date() - timeRef.current) / 1000;
  }, []);

  useEffect(() => {
    const i = setInterval(() => {
      setCollapsedTime(getTime());
    }, 1000);
    return () => {
      clearInterval(i);
    };
  }, []);

  useEffect(() => {
    timeRef.current = new Date();
  }, [value]);

  return {
    value,
    setValue,
    getTime,
    collapsedTime,
  };
};

export default function App() {
  const { setValue, value, collapsedTime, getTime } = useStateWithTimeFlag('');

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <div>
        {' '}
        value: {value} stay there in {collapsedTime} second{' '}
      </div>
      <div>
        {' '}
        value: {value} stay there in {getTime()} second{' '}
      </div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
    </div>
  );
}