useState doesn't update component

Here is my code. Clicking the buttons never updates the component. It does change the variable page but the component itself never re renders or shows the current value of the variable.

react and react-dom are version 16.8.1 babel-core is 6.26.0

const AssessmentWizard = (props) => {
  let [page, setPage] = useState(1)
  
  return (
    <div>
      {page}
      <Button onClick={() => setPage(page--)}>Previous Page</Button>
      <Button onClick={() => setPage(page++)}>Next Page</Button>
    </div>
  )
}

additionally, adding the example counter from the intro to hooks doc also didn’t work. I could tell I was clicking a button, but it never changed the view.

[anhphamduy]

page++ inside setPage means “after setting state, increase page by 1”. The fix is to use ++page because it’d increase page by 1 and then set state.

In your case, you should be using neither of them as state should only be mutated by setPage. For example, when doing page-- or --page, under the hood, they’re actually page = page - 1.

[gaearon]

I will also lock because issues like this tend to attract misinformation and wrong workarounds. Again — if you can reproduce this reliably and don’t use experimental projects like react-hot-loader then please file a new issue with a reproducing case. Thanks.