React envolve eventos nativos do navegador em um objeto cross-browser chamado SyntheticEvent e usa um único listener na raiz do aplicativo para despachar eventos para seus handlers (delegação de eventos). Você simplesmente anexa handlers como props.
<button onClick={e => { e.preventDefault(); save(); }}>Save</button>
onClick, onChange, onSubmit) e recebem uma função, não uma string (onClick={handleClick}, não onClick="handleClick()")e.preventDefault(), e.stopPropagation(), e.target.Não chame a função durante a renderização — envolva-a para que execute no evento, não imediatamente:
<button onClick={() => remove(id)}>Delete</button> // ✅ runs on click
<button onClick={remove(id)}>Delete</button> // ❌ runs during render!
A segunda linha chama remove(id) enquanto constrói o JSX (a cada renderização), o que quase nunca é o que você quer.
Para formulários, prefira onSubmit no <form> (com preventDefault) em vez de onClick no botão, para que a tecla Enter também funcione.