https://zenn.dev/syu/articles/3c4aa813b57b8c

ReactのuseStateを使ってセットした値が更新されていないということが起こったので、ここにまとめておきます。

useStateとは？

useStateは状態変数と状態変数を更新する関数を返す。状態変数が更新されるとコンポーネントを再レンダリングし、以下の記述で定義できます。

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

useStateでセットした値で更新されていない状況

以下のソースではクリックしたときにcountを1ずつ増やしています。

import {useState} from "react"

export default function Index () {
    const [count, setCount] = useState(0);
    const onButtonClick = () => {
      setCount(count + 1);
      alert(`count：${count}`);
    }

  return (
    <div>
      <button onClick={onButtonClick}>押して！</button>
    </div>
  )
}

この画面でボタンを押したときに、表示されるメッセージは何でしょうか？

答えは「count：0」です。一見すると、onButtonClickでcountが0の状態から＋1した値をセットしているので「count：1」が表示されそうですが、、、

なぜセットした値が更新されていないのか？

なぜセットした値が更新されていないのかというと、setStateで値が更新されるのは関数が呼び出された後だからです。

レンダリングされるたびにコンポーネント関数を呼び出しており、countは関数ごとに保持しています。

//初回レンダリング
function Index() {
    const count = 0;
    // ...
}

//クリック後の関数コンポーネント
function Index() {
    const count = 1;
    // ...
}

//2回クリック後の関数コンポーネント
function Index() {
    const count = 2;
    // ...
}

そのため、同じ関数内でsetCountで新しい値に更新してもcountはまだ古い値のままなのです。

更新した値で表示するには？

では、更新した値で値を表示するにはどうすればいいのでしょうか？

方法は2つあります