Why Native DOM event always reset React Component state

I know that the Synthetic Event, instead of the native dom event, should be the way to deal with interaction in React App, but I wonder why the behavior is so bizarre. When the React Event works well, and the dom event always reset the state to initial state.

import React, { useState, useEffect } from "react";
import "./style.css";

export default function App() {
  const [num, setNum] = useState(0);
  function clickMe() {
    setNum(num + 1);
  useEffect(() => {
    document.getElementById("app_btn").addEventListener("click", clickMe);
    return () =>
      document.getElementById("app_btn").removeEventListener("click", clickMe);
  }, []);
  return (
      <h1>Hello StackBlitz!</h1>
      <div>App {num}</div>
      <button id="app_btn">DOM click</button> <br />
      <button onClick={clickMe}>React Click</button>

The full project can be opened here https://stackblitz.com/edit/react-wqrmcu?file=src/App.js

77 thoughts on “Why Native DOM event always reset React Component state”

  1. 690499 644389Admiring the time and energy you put into your weblog and in depth details you offer. Its excellent to come across a blog every once in a although that isnt the same old rehashed material. Great read! Ive bookmarked your web site and Im adding your RSS feeds to my Google account. 54979

  2. 976430 450523I discovered your weblog site internet site on google and appearance some of your early posts. Preserve up the excellent operate. I just extra increase Feed to my MSN News Reader. Seeking for toward reading far a lot more by you later on! 524189


Leave a Comment