React Native async awaitができない

Question

閲覧いただき、ありがとうございます！
React Native・JS・TSの初心者です。

実現したいこと

ボタン押下時に、useStateで保持している値をカウントアップしてから、カウントアップされた値を表示したいです。

発生している問題・エラーメッセージ

カウントアップされる前に値が表示されてしまいます。

該当のソースコード

export function ExecuteButton(props) {
    const [count, setCount] = useState(0);

    const onPress = async () => {
        console.log(count); // 最初の押下ではuseState(0)でセットされた0が表示される
        setCount(await count + 1); // countが1になる
        const str = await 'count: ' + count;
        Alert.alert(str); // 「count: 1」と表示したいが、「count: 0」になる
    }

    return (
        <Button
            onPress={onPress}
            title='START!!!' />
    );
}

補足情報（FW/ツールのバージョンなど）

package.json(抜粋)

  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.71.7",
  },
  "devDependencies": {
    "@types/react": "~18.0.14",
    "@types/react-native": "^0.71.6",
    "typescript": "^4.9.4"
  },

alertにはcount: 1を表示したいです。
解決方法をご教授いただけますと、幸いです。

Answer 1

反映されない理由の理解は下記を参考にしました。
参考までに。
https://zenn.dev/syu/articles/3c4aa813b57b8c

Answer 2

無理です。

countはconstで宣言されていることからもわかるように、1度の実行で値は変わりません。

変わったcountをuseEffectで拾うなど、根本的に構造を変える必要があります。

Comments

[yah]

useEffectなどが必要なのですね、ありがとうございます！

https://reffect.co.jp/react/react-useeffect-understanding
を参考に、下記のようにしたら想定通り動きました！

```JavaScript
export function ExecuteButton(props) {
const [count, setCount] = useState(0);
useEffect(() => {
if (count !== 0) { // 起動時にAlertが出現してしまったので、ifを追加
const str = 'count: ' + count;
Alert.alert(str);
}
}, [count]);

const onPress = () => {
console.log(count); // 最初の押下ではuseState(0)でセットされた0が表示される
setCount(count + 1); // countが1になる
}

return (
<Button
onPress={onPress}
title='START!!!' />
);
}
```