HooksのuseStateの更新が即時反映されない

Question

前提・実現したいこと

https://ja.reactjs.org/tutorial/tutorial.html#lifting-state-up-again
React公式チュートリアルのチュートリアルで、classコンポーネントで実装されているところを関数コンポーネントで書き換えてみたところuseStateの挙動で理解できないところがあったので質問させていただきます。

該当のソースコード

import React, { useState } from 'react'

const Test = () => {
  const [history, setHistory] = useState([Array(9).fill(null)])
  const [current, setCurrent] = useState(history[history.length - 1])

  const handleClick = () => {
    const copySquares = current.slice()
    const set = history.concat([copySquares])
    setHistory(history.concat([copySquares]))
    setCurrent(history[history.length - 1])

    console.log(set)
    console.log(history)
  }

  return (
    <button
      style={{ height: '30px', width: '50px' }}
      onClick={() => {
        handleClick()
      }}
    ></button>
  )
}

//クリック1回目
[Array(9), Array(9)] //console.log(set)
[Array(9)] //console.log(history)

//クリック2回目
[Array(9), Array(9), Array(9)] //console.log(set)
[Array(9), Array(9)] //console.log(history)

//

発生している問題・エラーメッセージ

上記のコードで、console.log(set) と console.log(history) の結果が違うのはなぜでしょうか？
set に代入されている値と同じ値をhistoryにセットしているので同じ結果になると予想していたのですが…

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

上記のコードで、console.log(set) と console.log(history) の結果が違うのはなぜでしょうか？

setStateによる値の更新は非同期的に実行されます。setStateを呼んだ箇所から同期的に値を見ても変化しません。

Comments

[退会済みユーザー]

非同期であることを意識してコードを変更したところ思い通りの挙動になりました！
ありがとうございます！