react app resets state and rerenders without e.preventDefault on click

Question

I have a react app that seems to be resetting all of its state and re-renders the entire app when button is clicked:

the form + button:

<form>
...
    <button
      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
        // e.preventDefault()
      }}>
    </button>
</form>

calling preventDefault() fixes the problem which suggests to me that the event is bubbling up the DOM tree and triggering other handlers, but there aren't any handlers that should be causing a refresh-like phenomenon like this.

As per Igor Gonak's suggestion, it also stops happening when I change the enclosing <form> element to a <div>.

However, it only occurs the first time on a fresh tab after running npm start and I have to close the tab and restart the development build to reproduce the issue.

Any ideas what could be going on? or has anyone encountered similar problems before?

Answer 1

As per Igor Gonak's comment, the issue was caused by button type defaulting to submit. In this particular case it was resolved by specifying type='button' on the button.