UseState shows previous value always

Question

This is a popular question among all the new react developers but somehow I'm not able to understand the logic behind available solutions. I'm trying to update the state variable using hooks and trying it read the updated value but always it returns a previous value instead of new value. Below is the sequence of my code execution.

onClick={setTransactionAccountId}

on button click, it executes the below code and updates the state but the console.log shows the old value.

const [accountId, setAccountId] = useState(0);

const setTransactionAccountId = e => {
  console.log("Clicked ID:", e.currentTarget.value);
  setAccountId(e.currentTarget.value);
  console.log("accountId:", accountId);
};

console log:

1. first button click:

Clicked ID: 0 accountId: 0

2. second button click:

Clicked ID: 1 accountId: 0

could anyone please tell me the reason behind this behaviour and how to tackle it.

Answer 1

accountId won't have been updated this render. You have to wait for the next render for it to be updated. accountId only gets populated at the top of the function component when useState is called. You're in the middle of the render. If you need the actual value, keep pulling it out of e.currentTarget.value.