Странное поведение прослушивателя событий, добавленного в блок useEffect. ⇐ Javascript

[Anonymous]

Я изучаю React и настраиваю компонент, использующий useEffect, и есть один случай, который я не понимаю, поэтому я создал этот минимально воспроизводимый пример:
App.js:

Код: Выделить всё

import {useState } from "react";
import ArrayComponnent from "./ArrayComponent";
export default function App() {
let [array, setArray] = useState([1, 2, 3, 4, 5]);
return ;
}

ArrayComponent.jsx

Код: Выделить всё

import { memo, useEffect, useState } from "react";

function ArrayComponnent(props) {
let array = props.array;
console.log("test");
function addNumber() {
console.log(array);
let lastNumber = array[array.length - 1] + 1;
let newArray = [...array, lastNumber];
props.setArray(newArray);
}
useEffect(() => {
var addNumberButton = document.getElementById("add-number-button");
addNumberButton.addEventListener("click", () => {
addNumber();
});
}, []);
return (

 {array} 
 Add number 

);
}

export default ArrayComponnent;

Единственная причина useEffect — добавить прослушиватель событий только после того, как кнопка смонтирована, поэтому я ожидаю, что как только это будет сделано, и поскольку компонент будет перерисовываться каждый раз при изменении массива, список зависимостей можно оставить пустым, поскольку добавление прослушивателя кликов должно произойти только один раз.
Но если я это сделаю, добавление первого элемента будет работать нормально, но после этого это не так. Что еще более странно для меня, так это то, что console.log внутри функции addNumber вызывается каждый раз, но кажется, что он просто снова извлекает исходный массив и повторно обновляет уже добавленный элемент. Я подумал, что, возможно, весь объект вообще не перерисовывается, но также вызывается console.log в начале компонента массива. Так почему же он всегда использует первый массив, хотя его состояние изменилось.
Добавление массива в список зависимостей исправляет это, но не имеет смысла, почему useEffect вообще заботится о массиве, если его единственная роль — настроить прослушиватель событий?
Песочница кода: https://codesandbox.io/p/sandbox/tg2pfd

Подробнее здесь: https://stackoverflow.com/questions/798 ... fect-block