【React】useStateで配列を更新してもすぐにlengthが合わない理由と対処法

問題

useStateで管理している配列で、更新したにも関わらず配列の数が合わない。

React.js

const [messages, setMessages] = useState<string[]>([]);

// 中略
    await setMessages((prevMessages) => [...prevMessages, input]);

    console.log("messages.length", updatedMessages.length);

実際の出力：

原因

useStateの特性として以下がある。

• setState（今回の例では setMessages）は 非同期的に状態を更新する
• ただし、Promise を返さない → await しても待てない
• 状態は「次のレンダー」で更新される

解決方法

状態を即時に使いたい場合は、useStateで更新されるmessagesの代わりに、更新済みのローカル配列を使う。

React.js

const [messages, setMessages] = useState<string[]>([]);

// 中略
// updatedMessagesを定義
    const updatedMessages = [...messages, input];
    setMessages(updatedMessages);

//その数をカウントする
    console.log("messages.length", messages.length);

実際の出力：

終わりに

最初はawaitすれば状態も更新されると思っていたので、思わぬはまりポイントでした。
同じように「なぜlengthが合わないの？」と悩んでいる方の助けになればうれしいです.