<p dir="auto">react-scripts version: 3.4.1</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Created project with CRA typescript</li>
<li>Added <code class="notranslate">.eslintrc.js</code>:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json'],
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['@typescript-eslint', 'jest', 'react', 'react-hooks', 'sonarjs'],
  extends: [
    'standard-with-typescript',
    'plugin:jest/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:sonarjs/recommended',
  ],
  settings: {
    react: {
      version: 'detect',
    },
  },
}"><pre class="notranslate"><code class="notranslate">module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json'],
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['@typescript-eslint', 'jest', 'react', 'react-hooks', 'sonarjs'],
  extends: [
    'standard-with-typescript',
    'plugin:jest/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:sonarjs/recommended',
  ],
  settings: {
    react: {
      version: 'detect',
    },
  },
}
</code></pre></div>
<ol start="3" dir="auto">
<li>Added lints not included with <code class="notranslate">react-scripts</code> to <code class="notranslate">devDependencies</code>:</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    &quot;eslint-config-standard-with-typescript&quot;: &quot;^15.0.1&quot;,
    &quot;eslint-plugin-jest&quot;: &quot;^23.8.2&quot;,
    &quot;eslint-plugin-node&quot;: &quot;11&quot;,
    &quot;eslint-plugin-promise&quot;: &quot;4&quot;,
    &quot;eslint-plugin-sonarjs&quot;: &quot;^0.5.0&quot;,
    &quot;eslint-plugin-standard&quot;: &quot;4&quot;"><pre class="notranslate"><code class="notranslate">    "eslint-config-standard-with-typescript": "^15.0.1",
    "eslint-plugin-jest": "^23.8.2",
    "eslint-plugin-node": "11",
    "eslint-plugin-promise": "4",
    "eslint-plugin-sonarjs": "^0.5.0",
    "eslint-plugin-standard": "4"
</code></pre></div>
<ol start="4" dir="auto">
<li>Run with <code class="notranslate">npx eslint --fix --ext .js,.jsx,.ts,.tsx .</code></li>
</ol>
<p dir="auto">Worked around adding rules individually:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
},"><pre class="notranslate"><code class="notranslate">rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
},
</code></pre></div>
<p dir="auto">When a state update causes the form's submit button to be displayed, the form's submit event fires even though the submit button has not been pressed.</p>
<p dir="auto">React version: 18.2</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Press the "Change Mode" button on the first linked sample.</li>
<li>Checking the console, you can see the <code class="notranslate">submit</code> event is fired.</li>
</ol>
<p dir="auto">Link to code example:</p>
<p dir="auto"><a href="https://codesandbox.io/embed/friendly-alex-ehlut4?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow">https://codesandbox.io/embed/friendly-alex-ehlut4?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>
<p dir="auto">In the above sample, if the submit button is enclosed in <code class="notranslate">&lt;div&gt;</code>, this does not happen. Therefore, this phenomenon seems to be a bug related to React's re-rendering.</p>
<p dir="auto"><a href="https://codesandbox.io/embed/cocky-frost-fwd7vm?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow">https://codesandbox.io/embed/cocky-frost-fwd7vm?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">When the "Change Mode" button is pressed while in mode A, the <code class="notranslate">changeMode</code> handler for the <code class="notranslate">click</code> event is executed, and after being re-rendered in mode B, the <code class="notranslate">submit</code> event fires with the "Submit" button as the submitter.</p>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">When the Change Mode button is pressed while in mode A, only <code class="notranslate">changeMode</code>, the handler of the <code class="notranslate">click</code> event, is executed.</p>