Which one has better performance: add and remove event listener on every render VS running an useEffect to update a ref
App.js
function App() { const buttonRef = useRef(null); const [myState, setMyState] = useState(0); // handleClick remains unchanged const handleClick = useCallback( () => setMyState(prevState => prevState >= 3 ? 3 : prevState + 1), [] ); useClick(buttonRef, handleClick); return ( <div> <button ref={buttonRef}>Update counter</button> {"Counter value is: " + myState} </div> );}A more professional answer:
App.js
function App() { const buttonRef = useRef(null); const [myState, handleClick] = useReducer( prevState => prevState >= 3 ? 3 : prevState + 1, 0 ); useClick(buttonRef, handleClick); return ( <div> <button ref={buttonRef}>Update counter</button> {"Counter value is: " + myState} </div> );}