Second call to setState prevents first call to setState from executing - reactjs

Question

I am making a rock, paper, scissors game. In the code below, I have a context file that is used to store the global state. I also am showing my choices component. When a user clicks on a button in the choices component, the setChoices method is called which should set the user choice and cpu choice variables in the global state. Then, the cpuScore() method is ran afterwards to increment the cpu score (just to illustrate the problem). The cpu score updates as expected, but the choice variables are not updated. If I do not run the cpuScore method, the choice variables update as expected, but obviously not the score.
//context file
import React, { createContext, useState } from 'react';
const GameContext = createContext();
const GameContextProvider = props => {
const [gameItems, setGameItems] = useState(
{userChoice: null, userScore: 0, cpuChoice: null, cpuScore: 0}
);
const setChoices = (userChoice, cpuChoice) => {
setGameItems({...gameItems, userChoice: userChoice, cpuChoice: cpuChoice})
}
const cpuScore = () => {
setGameItems({...gameItems, cpuScore: gameItems.cpuScore + 1})
}
return (
<GameContext.Provider value={{gameItems, setChoices, cpuScore}}>
{ props.children }
</GameContext.Provider>
)
}
export default GameContextProvider;
//choices component
import React, { useContext } from 'react';
import { GameContext } from '../contexts/GameContext';
const Choices = (props) => {
const { setChoices, cpuScore } = useContext(GameContext);
const getCpuChoice = () => {
const cpuChoices = ['r', 'p', 's'];
const randomIndex = Math.floor((Math.random() * 3));
const cpuDecision = cpuChoices[randomIndex];
return cpuDecision
}
const playGame = (e) => {
const userChoice = e.target.id;
const cpuChoice = getCpuChoice();
setChoices(userChoice, cpuChoice);
cpuScore();
}
return (
<div>
<h1>Make Your Selection</h1>
<div className="choices">
<i className="choice fas fa-hand-paper fa-10x" id="p" onClick={playGame}></i>
<i className="choice fas fa-hand-rock fa-10x" id="r" onClick={playGame}></i>
<i className="choice fas fa-hand-scissors fa-10x" id='s' onClick={playGame}></i>
</div>
</div>
)
What do I need to change to set the state for both choice and score?

Answer 1

Since calls to setState are asynchronous, your two calls to setState are interfering with each other, the later one is overwriting the earlier one.
You have a few options.
Separate your state so that the values don't affect each other:
const [choices, setChoices] = useState({ user: null, cpu: null });
const [scores, setScores] = useState({ user: 0, cpu: 0);
Or go even further and set each of the two choices and two scores as their own state value.
Keep all state in one object, but update it all at once:
const setChoices = (userChoice, cpuChoice) => {
const cpuScore = gameItems.cpuScore + 1;
setGameItems({
...gameItems,
userChoice,
cpuChoice,
cpuScore
});
}
Use useReducer:
const initialState = {
userChoice: null,
userScore: 0,
cpuChoice: null,
cpuScore: 0
}
const [gameItems, dispatch] = useReducer((state, action) => {
switch (action.type) {
case "UPDATE_CHOICES":
return {
...state,
userChoice: action.userChoice,
cpuChoice: action.cpuChoice
};
case 'UPDATE_CPU_SCORE':
return {
...state,
cpuScore: state.cpuScore + 1
}
default:
return state;
}
}, initialState);
const setChoices = (userChoice, cpuChoice) => {
dispatch({ type: 'UPDATE_CHOICES', userChoice, cpuChoice });
};
const cpuScore = () => {
dispatch({ type: 'UPDATE_CPU_SCORE'})
};

Answer 2

Basically, React doesn't immediately updates after you call setState.
If you call cpuScore() right after setChoices(), the cpuScore function you are calling is still the function from the current render, not after setChoices() update. Because of that, cpuScore() will set the state again, using the spread value of gameItems (which is still hasn't changed because the update from setChoices hasn't kicked in) which cause the changes by setChoices() to be overridden.
If React always immediately updates after every setState call, the performance would be atrocious. What React does is it will batch multiple setState calls into one update, so it doesn't update the DOM repeatedly.
const cpuScore = () => {
setGameItems({...gameItems, cpuScore: gameItems.cpuScore + 1})
}
My suggestion would be either to separate this two states, so they don't get overwritten by each other, or create a new function that handle all this updates in one place.