React Batch Update

Hooks里对state的更新，在同一个event handler里，是会batch的，即使有promise等async操作

const { useState, useEffect, } = React;
function Test() {
  const [counter, setCounter] = useState(0);
  const [counter1, setCounter1] = useState(0);
  const [renderCnt, setRenderCnt] = useState(0);
  const handleClick = () => {
    setCounter(counter+1); // comment out this to see the diff action
    (new Promise((resolve) => setTimeout(() => {resolve()}, 1000))).then(res => {
        setCounter(counter+1);
      setCounter1(counter1+1)
    })
  };
  useEffect(() => {
    setRenderCnt(renderCnt + 1)
  }, [counter, counter1]); // here we also dep on counter1, the render will not be batched though
  return (
    <div>
      <p>You clicked {counter} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
      <p>Rendered {renderCnt} times</p>
    </div>
  );
}
ReactDOM.render(<Test />, document.querySelector("#app"))

但是，render的话，却会因为async操作的存在而不能被batch。