ReactのState管理の特徴について知りたいです

Question

React Nativeを利用してアプリ開発をしています。

functionコンポーネントでhooksを利用して、stateの管理をしています。

下記のコードで、下のような動作（addボタンを押す）をした際に、期待するコンソール表示は[A]なのですが、実際は[B]の表示となります。

動作の方法
①：起動させ画面が表示される
②：[追加]ボタンを押す

A：期待するコンソール表示

--initial--
0
--add--
1
--initial--
1

B：実際のコンソール表示

--initial--
0
--add--
0
--initial--
1

追加ボタンを押した際のfunctionで、state(counter)が１つ増える処理をした後に、コンソール表示をさせているのに、なぜstate(counter)の初期値での表示となるのでしょうか？

また、追加ボタンを押した時に、state(counter)が１つ増えるようにするには、どのようなコードにすればよいのでしょうか？

ご存知の方おりましたら、ご教授いただけないでしょうか？

---

コードは以下のとおりです。

import React, { useState } from "react";
import { View, Button } from "react-native";

export default function TestStateArray() {
  const [counter, setCounter] = useState(0);

  function handleAdd() {
    setCounter((v) => v + 1);
    console.log("--add--");
    console.log(counter);
  }
  
  console.log("--initial--");
  console.log(counter);

  return (
    <View>
      <Button
        title="追加"
        onPress={() => {
          handleAdd();
        }}
      />
    </View>
  );
}

---

node : 12.18.3
react native : 4.10.1
expo : 3.22.3

Answer 1

追加ボタンを押した際のfunctionで、state(counter)が１つ増える処理をした後に、コンソール表示をさせているのに、

stateの変更は非同期で行われます。setCounterした直後に、同期的に値を見ても変わりません。

Comments

[maisumakun]

> 追加ボタンを押した時に、state(counter)が１つ増えるようにするには、どのようなコードにすればよいのでしょうか？

そのような方法はありません。最初にconstで変数にセットしている以上、JavaScriptの文法的にもcounterの値が変わる余地はありません。

[maisumakun]

「値が変わったこと」をきっかけとしてなにか実行したい場合は、useEffectを使ってください。

[tomaa]

ご回答ありがとうございます。
state,非同期をキーワードに内容について調べる事ができました。
https://ja.reactjs.org/docs/faq-state.html
useEffectを利用する方法も試してみたいと思います。