如何给 useState 添加回调？

在类组件当中，我们可以给 setState 传递一个 callback 用于拿到最新的状态值，例如：

setState(
  { name: "keliq" },
  () => console.log(this.state)
);

但是在 useState hook 中，我如何在 setState 之后拿到最新的状态值呢？其实，只要利用 useEffect hook 就行了：

const [counter, setCounter] = useState(0);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
   console.log('Do something after counter has changed', counter);
}, [counter]);

上面 useEffect 的回调函数会在首次渲染以及每次 counter 更新之后执行，如果你只想在 counter 更新之后执行回调，忽略首次渲染，则可以利用 useRef 实现：

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

const [counter, setCounter] = useState(0);
const didMount = useRef(false);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
  if (!didMount.current) return didMount.current = true;
  console.log('Do something after counter has changed', counter);
}, [counter]);