The calculated average should be 0.55555....

I figured that if I would update using a new variable it would return the actual value, but it is always one behind when calculating the average score.

Could somebody explain this to me? I also tried using the UseEffect hook, but i'm not sure what the argument should be and where I should place the useEffect hook.

const App = () => {
  // save clicks of each button to its own state
  const [good, setGood] = useState(0);
  const [neutral, setNeutral] = useState(0);
  const [bad, setBad] = useState(0);
  const [total, setTotal] = useState(0);
  const [average, setAverage] = useState(0);

  const handleGoodClick = () => {
    const updatedGood = good;
    setGood(updatedGood   1);
    setTotal(total   1);
    calculateAverage();
  };

  const handleNeutralClick = () => {
    const updatedNeutral = neutral;
    setNeutral(updatedNeutral   1);
    setTotal(total   1);
    calculateAverage();
  };

  const handleBadClick = () => {
    const updatedBad = bad;
    setBad(updatedBad   1);
    setTotal(total   1);
    calculateAverage();
  };

  const calculateAverage = () => {
    const score = good - bad;
    setAverage(score / total);
  };

​

https://preview.redd.it/lnq493a0m1jb1.png?width=263&format=png&auto=webp&s=e4f8d0c38d5ec15b8a9bee9662c794d7c77c0bf2