[铁人赛 Day13] 来读 Hooks FAQ 文件吧！- Effect dependencies 太常改变，可以做些什麽吗？

1. 什麽状况下 code 里面会看到不新鲜的 props 跟 state？

以下案例在 state 已经更新的状态下，仍然会取到旧的值。原因是任何在元件内的函式（包含 event handlers 与 effects ）看到的 props 与 state 都是从他们被建立的当下那组 render 结果里取来的。

如果你按下 “Show alert” 之後立刻点击 "Click me" 去更动 count state 的数量，“Show alert” 印出来的 count 会是你点击 “Show alert” 按钮当下的数字，而不是你点击 "Click me" 之後更新过的数字。而如果你是有意要去读取到非同步 callback 里最新的 state 结果，你可以把他保存在 ref 里。

function Example() {
	// 元件里有一个 count 的 state，初始值是 0 
  const [count, setCount] = useState(0);

  function handleAlertClick() {
		// 在触发点击的当下，会等待 10 秒之後，印出当下的 count 数量
    setTimeout(() => {
      alert('You clicked on: ' + count);
    }, 10000);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <button onClick={handleAlertClick}>
        Show alert
      </button>
    </div>
  );
}

除了上面的案例，其他可能的原因还有：你使用了依赖 ”dependency array“ 的优化方法，但没有正确的指定所有 dependencies。

2. Effect dependencies 太常改变，可以做些什麽吗？

有时候你的 effect 使用的 state 可能频繁改变，例如底下的 count。把 count 放进 dependencies 是标准做法，但这会在每次 count 改变的时候，reset interval。

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const counter = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(counter);
  }, [count]);

  return <h1>{count}</h1>;
}

要解决这个缺点，我们可以使用 setState 的 Functional updates，就不需要 reference 当下的 state 值。

// 你可以传一个 function 给 setState，这个 function 会接收到前一个值，然後回传更新过的值。
<button onClick={() => setCount(prevCount => prevCount - 1)}>minus</button>

把它带入案例里，就是这样子。因为我们不需要再依靠 count 变数，而是使用 setState 就可以拿到同样的内容并且对它更新。

*dependencies 的空值（[ ]），代表这个 effect 只会在 component mount 的时候跑一次。

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const counter = setInterval(() => {
      setCount(prevCount => prevCount + 1); 
    }, 1000);
    return () => clearInterval(counter);
  }, []);

  return <h1>{count}</h1>;
}