React useState() doesn't update value synchronously

Keywords: html reactjs react-hooks

Question: 

React useState() doesn't update value of the variable if called just after setting value.

I read about useEffect(), but don't really know how this will be useful for this particular scenario.

Code (please open the console tab to see the variable status)

Answers: