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.

It usually isn't necessary.

The stateful count variable that the currently active click listener closes over will contain, at any given point in time, the current count. If you click 3 times, the component will re-render 3 times, and the count closed over by the currently attached listener will contain 3.

The time where you would need to use the callback form you're thinking of would be if you wanted to pass the setter function somewhere else (such as to a child component) and didn't want the child component to have to take the count as a prop as well - that makes for some messy boilerplate, especially when components get pretty nested.

You might also use the callback form in the current component if you called the callback in a function that doesn't get a new closure every render, such as for useEffect:

useEffect(() => {
  setInterval(() => {
    setCount(prevCount => prevCount + 1);
  }, 1000);
}, []);

Because the effect hook there only runs on mount, the count variable it could see would be only the initial 0 value - so you have to use the callback form instead.

It is probably because the addItem() function has an old reference to your indexList

From the react docs:

If the new state is computed using the previous state, you can pass a function to setState. The function will receive the previous value, and return an updated value.

Try changing your addItem function to this:

function addItem() {
  setIndexList((oldIndexList) => {
    logger.debug("indexList was: ", ": ", oldIndexList?.length, ":", oldIndexList)
    const newIndexList = oldIndexList == null ? [] : [...indexList]
    newIndexList.push(newIndexList.length)
    logger.debug("indexList became: ", newIndexList.length, ": ", newIndexList)
    return newIndexList;
  })
}

Since the new hook setState method does not have callbacks you have to use useEffect to make functions after the state gets updated

const [count, setCount] = useState(0)
useEffect(() => doSth(count)) 

The useState hook is somewhat asynchronous (although you cannot wait for it).

Try using a useEffect:

useEffect(() => {
   console.log(isEnabled)
}, [isEnabled]) // Array of dependencies: when any of these value changes, the function in the useEffect will re-run

More information here:

• https://dev.to/shareef/react-usestate-hook-is-asynchronous-1hia
• https://javascript.plainenglish.io/why-you-shouldnt-always-use-usestate-658994693018

It might become clear why this would not work if we would simplify all those React magic into :

  function withState(initial, fn) {
    function setState(updated) {
       setTimeout(() => fn(updated, setState), 0);
       //...
    }
    setState(initial);
  }

Now we can illustrate what happens:

  withState(0, (counter, setCount) => {
    console.log("before", counter);
    if(counter < 10) setCount(counter + 1);
    console.log("after", counter);
  });

As you can see, setCount will not change the state (count) directly. It will actually not change the local count variable at all. Therefore "before" and "after" will always log the same (as long as you don't mutate counter directly).

Instead calling setCount will be deffered (and batched in React), and then it will recall the whole component function passing in the new count.

Therefore it makes no sense trying to await the setState call, also it makes no sense to log the state before and after it (as it won't change inbetween). Log it once in a component, if you set the state the whole component executes again and the logging will log the new state.