Esta es una de las cosas más básicas en React, pero me pregunto por qué funciona counter+1 , pero en counter++ debes hacer doble clic para aumentar el número.
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=4Es por eso que necesita hacer doble clic porque tiene la siguiente lógica:
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 1La diferencia es que counter + 1 es solo una operación y counter++ es una operación con una asignación. En React, no debe asignar su estado directamente, sino usar el método setter. Entonces en tu caso es mejor usar counter + 1