Why does console.logs does not matched the output rendered in <Text> expression in this basic-CodePudding

I have tried console logs before and after updating the count and it is updating values on screen but not in console logs which I use to verify my results.

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

export default function App() {
  const [count, setCount] = useState(0);

  const increaseCount = () => {
    console.log(`Count initially -- ${count}`);
    setCount(count   1);
    console.log(`Count finally -- ${count}`);
  };

  return (
    <View style={styles.container}>
      <Button title="Change Value" onPress={increaseCount} />
      <Text>{count}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

Please report any mistake I am doing or the reason behind it.

I tried adding set Timeouts in place of console logs as I thought they may take time to get updated but the outputs are the same, it doesn't work.

Edited ------

But if useState is async function and I now tried making increaseCount function async and await when calling setCount, it should work now as per my understanding but it doesn't ☹️. All I am asking is that I am learning useState currently, how can I trust useState in my bigger programs where I may need to use the updated values in the very next line of code, when I can't even predict when it will update my state.

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

export default function App() {
  const [count, setCount] = useState(0);

  const increaseCount = async () => {
    console.log(`Count initially -- ${count}`);
    await setCount(count   1);
    console.log(`Count finally -- ${count}`);
  };

  return (
    <View style={styles.container}>
      <Button title="Change Value" onPress={increaseCount} />
      <Text>{count}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

CodePudding user response：

You are very close to the answer, React Native setState is asynchronous function. So it will not update the value immediately.

If you want to use the updated value, use useEffect().

export default function App() {

  const [count, setCount] = useState(0);

  React.useEffect(() => {
    //When count is changed, this function is triggered with updated value
    console.log(`Count finally -- ${count}`);
  }, [count]);

  const increaseCount = () => {
    console.log(`Count initially -- ${count}`);
    setCount(count   1);
  };

  return (
    <View style={styles.container}>
      <Button title="Change Value" onPress={increaseCount} />
      <Text>{count}</Text>
    </View>
  );
}