【React】useStateの値が更新されない原因と解消方法

いまいち仕組みが理解できておらず、実際使ってみてつまずいた中で少し理解が深まったので、備忘録として残しておきます。

追記

少し調べてこの記事のような結論に至りましたが、内容が不足している部分や不正確な部分があります。
詳しく、またわかりやすく解説してくださっている記事があるので、ステートが更新されないことで悩まれている方はこちらの記事を読むことをお勧めします！

useStateとは

ページの構成要素であるコンポーネントの状態を管理するReactフックの一つ。
useStateは以下の2つの構成要素で成り立っています。

• 現在の状態を表す変数
• その変数を更新するための関数

基本構文

.jsx

const [状態変数, 変数を更新する関数] = useState(初期値)

値が更新されないコード

.jsx

export default function Map() {
    const [showSentence, setShowSentence] = useState(false);

    const onClick = () => {
    showSentence ? setShowSentence(false) : setShowSentence(true);
    console.log(showSentence)
  };

指定のコンポーネントをクリックして、コンソールに出力された値は「false」でした。

更新されない原因

値が更新されないのは、状態が更新されるのは関数が呼び出された後だからでした。
関数の呼び出し後、コンポーネントには無事更新後の値が渡されています。

更新された値を表示する方法

この記事を参考にさせていただきました。

公式ドキュメント