如何延迟功能组件中的重新渲染？

Question

我的目标是在用户提供输入时延迟重新渲染，等待大约2秒钟再重新渲染。

预期结果是：延迟重新渲染，每2秒下降到1个实例。而不是为每个状态更新重新渲染。

当前结果：确实延迟了text2状态更新。每当状态为text时，它仍会重新渲染。

function App() {
  const [text, setText] = React.useState();
  const [text2, setText2] = React.useState(0);

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      setText2(initial => initial + 1)
    }, 2000)
  }, [text])

  return (
    <>
      <form>
        <label>
          Name:
          <input type="text" name="name" />
        </label>
      </form>
      <div>{text}</div>
      <div>{text2}</div>
    </>
  )
}

另一个想法是使用let变量而不是useState钩子，但令人惊讶的是useEffect不会监听let变量的更改，因此它不会-渲染。