Counter variable issue with JavaScript

Question

In a React app, I got a state variable that's set to 0 at first.

const [amount, setAmount] = useState(0)

The functionality i'm looking for is to add/remover product in a redux store.

So if a user presses a "+" button, it will check if amount is now bigger than 0, and if so it'll dispatch an action to the store. But what I'm getting is that only after the second "+" press, when the value of amount is already 2, the action is actually dispatched. This is the code :

const handleAmount = action => {
    if (action === 'plus') {
      setAmount(currAmount => currAmount + 1)
      updateStore()
    }
  }

const updateStore = () => {
    if (amount >= 1) {
      dispatch(addToCart(product))
    }
  }

What am I missing?

Can you provide us with the code of your action and reducer? — Nick
– Nick, Commented Oct 18, 2020 at 12:52
Why don't you implement amount in redux also? setState applies changes only in the next render. Redux and useReducer on the other hand give you the current state once they have changed. — BlackMath
– BlackMath, Commented Oct 18, 2020 at 13:04

Yousaf · Accepted Answer · 2020-10-18 12:57:08Z

3

State is updated asynchronously, so when you call updateStore right after calling setAmount, state hasn't updated yet, so updateStore function sees the old value of amount.

When you click the second time, it works because now the updated value of amount will be 2 and the old value that updateStore function will use is 1, so the condition if (amount >= 1) evaluates to true and as a result the action is dispatched.

You can fix this problem using one of the following options:

Pass the new value of amount to updateStore function as an argument
Use the useEffect hook that executes whenever amount changes. Just move the code inside updateStore function inside useEffect hook and add amount in the dependency array of the useEffect hook.
```
useEffect(() => {
   if (amount >= 1) {
      dispatch(addToCart(product))
   }
}, [amount]);
```
and remove the updateStore function, you don't need it if you use the useEffect hook.

edited Oct 18, 2020 at 12:57

answered Oct 18, 2020 at 12:52

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jaher Over a year ago

What logic should I put inside useEffect?

Collectives™ on Stack Overflow

Counter variable issue with JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related