почему хук реакции setState всегда выполняется дважды

Question

Я нажал кнопку div, и консоль напечатала

click
111
setState
111
setState

, почему setState всегда выполняется дважды Это мой код

function App() {
  const [num, setNum] = useState(0);
  console.log('111');
  return (
    <div>
      {num}
      <div onClick={ () => {
        console.log('click');
        setNum( num => {
          console.log('setState');
          return num + 1;
        })
      }}>button</div>
    </div>
  )
}

Answer 1

Но разве num после клика равно 2 или 1?

Может быть, эта форма будет работать лучше?

function App() {
  const [num, setNum] = useState(0);
  console.log('111');
  return (
    <div>
      {num}
      <div onClick={ () => {
        console.log('click');
        setNum(num + 1)
      }}>button</div>
    </div>
  )
}

Также, возможно, попробуйте использовать кнопка для нажатия вместо div ?