【React】useStateでsetState後に値が更新されない事象の対応方法

はじめに

基本的にuseStateで定義した変数の値を変更する際はsetStateを用いますが、値が変更されない事象がありました。
調べたところReactの仕様っぽかったので備忘録の粒度ではありますが記載したいと思います。

zenn.dev

内容

以下のようなコードの場合、setState後も値は変更されません(正確には一つ前の値が入ります)。

const [date, setDate] = useState<Date>(new Date());

const handleChange = (newDate: Date) => {
    setDate(newDate);
    
    // dateの値がnewDateに更新されているはずが更新されない
    console.log(date);
};

useStateの仕様

最初に参照させていただいた記事によると、どうやらstateの値は再レンダリングされた後に更新されるとのことでした。

なるほど、だから一つ前の値が入るのですね。

更新後の値を取得する方法

そのため、再レンダリング後の値は単純に以下のように更新後の値を直接見ましょう。

const [date, setDate] = useState<Date>(new Date());

const handleChange = (newDate: Date) => {
    setDate(newDate);
    
    // 直接newDateを見ちゃう
    console.log(newDate);
};

おわりに

ふとしたところでハマってしまいますが、仕様の理解が進んでいくととても楽しいですね！