はじめに

Reactアプリを作っていた際にuseStateで躓いたことがあったので共有します。

問題

set関数を使って値を変更しようとしても初期値のまんま変わってくれない。

そのときの実際のコードと同じような例

/* 省略 */
const [user, setUser] = useState("");

useEffect(() => {
    setUser("太郎");
    console.log(user); // => ""  　"太郎"と出力してほしいのに、、、
})

/* 省略 */

state変数は、set関数を呼び出している関数の外( 今回だとuseEffect )で使う。

/* 省略 */
const [user, setUser] = useState("");

useEffect(() => {
    setUser("太郎");
})
console.log(user); // => "太郎"

/* 省略 */

state変数が更新されるのはset関数が呼び出されたその瞬間ではないからです。公式ドキュメントに記述されている通り、set関数を呼び出したタイミングではレンダーのリクエスト・予約のようなものをしているにすぎません。

これは、state がスナップショットのように振る舞うためです。state の更新は、新しい state の値での再レンダーをリクエストします。すでに実行中のイベントハンドラ内の count という JavaScript 変数には影響を与えません。

公式ドキュメントより引用

Reactの基礎的な考えが欠けているのだなぁと感じました。使っていくうちに慣れていこうと思います。