This is one of the most basic things in React but I wonder why counter+1 is working, but in counter++ you must double click to increase the number?
import React, { useState } from "react";
import "./App.css";
function App() {
const [counter, setCounter] = useState(0);
const counterHandler = () => {
setCounter(counter + 1);
};
return (
<div className="App">
{counter}
<button onClick={counterHandler}>Increment</button>
</div>
);
}
export default App;
let x = 3
let y = x++
//output: x=4 y=3
let x = 3
let y = ++x
//output: x=4 y=4
It's why you need to double click because you have next logic:
console.log(counter) //0
//triggers click
console.log(counter) //0, useState re-assigned to 0
//triggers click
console.log(counter) //1, useState re-assigned to 1
Difference is that counter + 1 is only an operation and counter++ is an operation with an assignment. In React you shouldn't assign your state directly but use the setter method. So in your case it is better to use counter + 1