Update state in useEffect shows warning - reactjs

Question

I want to update a state after some other state is updated:
export default function App() {
const [diceNumber, setDiceNumber] = useState(0);
const [rolledValues, setRolledValues] = useState([
{ id: 1, total: 0 },
{ id: 2, total: 0 },
{ id: 3, total: 0 },
{ id: 4, total: 0 },
{ id: 5, total: 0 },
{ id: 6, total: 0 }
]);
const rollDice = async () => {
await startRolingSequence();
};
const startRolingSequence = () => {
return new Promise(resolve => {
for (let i = 0; i < 2500; i++) {
setTimeout(() => {
const num = Math.ceil(Math.random() * 6);
setDiceNumber(num);
}, (i *= 1.1));
}
setTimeout(resolve, 2600);
});
};
useEffect(()=>{
if(!diceNumber) return;
const valueIdx = rolledValues.findIndex(val => val.id === diceNumber);
const newValue = rolledValues[valueIdx];
const {total} = newValue;
newValue.total = total + 1;
setRolledValues([
...rolledValues.slice(0,valueIdx),
newValue,
...rolledValues.slice(valueIdx+1)
])
}, [diceNumber]);
return (
<div className="App">
<button onClick={rollDice}>Roll the dice</button>
<div> Dice Number: {diceNumber ? diceNumber : ''}</div>
</div>
);
}
Here's a sandbox
When the user rolls the dice, a couple setTimeouts will change the state value and resolve eventually. Once it resolves I want to keep track of the score in an array of objects.
So when I write it like this, it works but eslint gives me a warning of a missing dependency. But when I put the dependency in, useEffect will end in a forever loop.
How do I achieve a state update after a state update without causing a forever loop?

Answer 1

Here's a way to set it up that keeps the use effect and doesn't have a dependency issue in the effect: https://codesandbox.io/s/priceless-keldysh-wf8cp?file=/src/App.js
This change in the logic of the setRolledValues call includes getting rid of an accidental mutation to the rolledValues array which could potentially cause issues if you were using it in other places as all React state should be worked with immutably in order to prevent issues.
The setRolledValues has been changed to use the state callback option to prevent a dependency requirement.
useEffect(() => {
if (!diceNumber) return;
setRolledValues(rolledValues => {
const valueIdx = rolledValues.findIndex(val => val.id === diceNumber);
const value = rolledValues[valueIdx];
const { total } = value;
return [
...rolledValues.slice(0, valueIdx),
{ ...value, total: total + 1 },
...rolledValues.slice(valueIdx + 1)
];
});
}, [diceNumber]);
I wouldn't recommend working with it like this, though as it has an issue where if the same number is rolled multiple times in a row, the effect only triggers the first time.
You can move the logic into the rollDice callback instead, which will get rid of both issues that was occurring. https://codesandbox.io/s/stoic-visvesvaraya-402o1?file=/src/App.js
I added a useCallback around rollDice to ensure it doesn't change references so it can be used within useEffects.
const rollDice = useCallback(() => {
const num = Math.ceil(Math.random() * 6);
setDiceNumber(num);
setRolledValues(rolledValues => {
const valueIdx = rolledValues.findIndex(val => val.id === num);
const value = rolledValues[valueIdx];
const { total } = value;
return [
...rolledValues.slice(0, valueIdx),
// newValue,
{ ...value, total: total + 1 },
...rolledValues.slice(valueIdx + 1)
];
});
}, []);

Answer 2

You should be able to just stick all the logic within setRolledValues
useEffect(() => {
if (!diceNumber) return;
setRolledValues((prev) => {
const valueIdx = prev.findIndex(val => val.id === diceNumber);
const newValue = prev[valueIdx];
const { total } = newValue;
newValue.total = total + 1;
return [
...prev.slice(0, valueIdx),
newValue,
...prev.slice(valueIdx + 1)
]
})
}, [diceNumber]);
EDIT: As others have pointed out, useEffect for this application appears to be ill-suited, as you could simply update setRolledValues in your function instead.
If there is some sort of underlying system we're not being shown where you must use an observer pattern like this, you can change the datatype of diceNumber to an object instead, that way subsequent calls to the same number would trigger useEffect