React setState not changing value-CodePudding

I am using react useState hook with a callback to update state.

However, the value stays at the initial value of 0.

const [currPos, setCurrPos] = useState(0);
console.log(`Current position is ${currPos}`);
// Update currPos so next keyPress is in the correct position
setCurrPos((prevState) => prevState   1);

Logs always contain Current position is 0.

Code link: https://gitlab.com/mk851/wordle-clone/-/blob/main/src/App.tsx#L50

CodePudding user response：

You will have to implement useEffect to view the changes. You're consoling the previous value, and useState is an asynchronous function it will go to the callback queue, meanwhile the value will be consoled, so you need to console the value whenever the currPos changes.

const [currPos, setCurrPos] = useState(0);

useEffect(() => console.log(currPos), [currPos]);

setCurrPos(prevCurrPos => prevCurrPos   1);

CodePudding user response：

The flow of your code is: a) console.log the current position. b) Update the value. You will see it effectively updated if you check the state with react developer tools.

Under this flow, the behavior you experience is correct.

To see the console.log every time you update the counter you will need to add an effect:

const [currPos, setCurrPos] = useState(0);
useEffect(()=>{
  console.log(`Current position is ${currPos}`);
}, [])
// Update currPos so next keyPress is in the correct position
setCurrPos((prevState) => prevState   1);

This way, you will get the log AFTER its update and not before.

CodePudding user response：

This is a duplicate answer: React Native console.log old value useState

The useState hook is somewhat asynchronous (although you cannot wait for it).

Try using a useEffect:

useEffect(() => {
   console.log(isEnabled)
}, [isEnabled]) // Array of dependencies: when any of these value changes, the function in the useEffect will re-run

More information here:

CodePudding user response：

Generally you can only able to see the state default after changing the state . So there is two possible way to check the current position . 
First one is :

    const [currPos, setCurrPos] = useState(0);
    
    useEffect(() => console.log(currPos), [currPos]);
    
    setCurrPos(prevCurrPos => prevCurrPos   1);


That Answer by @Jaisal Shah Kudos to him 

And Secound Way is  : 

  const [currPos, setCurrPos] = useState(0);

  myFunction() {
  setCurrPos(prevCurrPos => prevCurrPos   1);
  } 
  
  useEffect(()=>{
   myFunction()
   console.log(currPos) // Then you can call your console and you may able to get it 
  },[])

after this you can put your console to check the position and while calling the set state . But Note that you can not get the updated state on console after just updating usestate . So just put console out of or in

CodePudding user response：

Looking at your code I would say you are missing the return statement. Try this instead:

setCurrPos((prevState) => return prevState   1);