The Journey of theReact Component

function App() {
  const [count, setCount] = useState(1);

  useEffect(() => {
    const t = setTimeout(() => {
      console.log(count);
    }, [count * 1000]);
    return () => clearTimeout(t);
  }, [count]);

  return (
    <button
      onClick={() =>
        setCount(count + 1)
      }
    >
      {count}
    </button>
  );
}

Transpile JSX

function App() {
  const [count, setCount] = useState(1);

  useEffect(() => {
    const t = setTimeout(() => {
      console.log(count);
    }, [count * 1000]);
    return () => clearTimeout(t);
  }, [count]);

  return React.createElement(
    "button",
    {
      onClick: () => setCount(count + 1),
    },
    count
  );
}

Initial render

function App() {
  count: 1

  useEffect(() => {
    const t = setTimeout(() => {
      console.log(1);
    }, [1 * 1000]);
    return () => clearTimeout(t);
  }, [1]);

  return React.createElement(
    "button",
    {
      onClick: () => setCount(1 + 1),
    },
    1
  );
}

Return a snapshot

{
  type: "button",
  key: null,
  ref: null,
  props: {
    onClick: () => setCount(1 + 1),
    children: 1,
  },
}

Commit to the DOM

DOM
<html>
  <head>...</head>
  <body>
    <div id="root">
      <button>1</button>
     </div>
  </body>
</html>

Browser paints the screen

Run the effect

function App() {
  count: 1

  useEffect(() => {
    const t = setTimeout(() => {
      console.log(1);
    }, [1 * 1000]);
    return () => clearTimeout(t);
  }, [1]);

  return React.createElement(
    "button",
    {
      onClick: () => setCount(1 + 1),
    },
    1
  );
}

Click the button to trigger re-render