React hook useEffect 与 计时器 setInterval

import React, { useEffect, useState } from "react";

export default function App() {
  const [counter, setcount] = useState(0);
  useEffect(() => {
    setInterval(() => {
      setcount((pre) => pre + 1);
    }, 1000);
  }, []);
  return (
    <div className="App">
      <div>{counter}</div>
    </div>
  );
}

useEffect第二个参数的数组置为空，否则会出现多个计时器，导致 x = 2 * x + 1

又去看了一下其他人的博客，这种问题和过时状态有关：
如果在计时器中包裹set方法，传参为变量本身+1，很可能多个计时器取到的变量值是最开始的，并不能保证是最新值
如果采用传入一个函数的方法，则react可以保证每次取到的值是最新的。