React是否有可能修改引用？

我做了一个在 React (*) 中手动实现观察者模式的小实验。它基本上有效，但有一个非常出乎意料的细节。考虑这个最小的例子：

class Observer {
  constructor() {
    this.callbacks = [];
  }

  register(callback) {
    console.log("received callback register");
    this.callbacks.push(callback);
    console.log(`number of callbacks: ${this.callbacks.length}`);
  }

  call() {
    console.log(`calling ${this.callbacks.length} callbacks`);
    for (let callback of this.callbacks) {
      callback();
    }
  }
}

function Main() {
  const observer = useRef(new Observer());

  useEffect(() => {
    observer.current.call();
  }, [observer]);

  return <SubComponent observer={observer.current} />;
}

function SubComponent({ observer }) {
  console.log("registering observer");
  observer.register(() => {
    console.log("callback called");
  });
  return <div>Hello World</div>;
}

代码沙盒

在控制台日志中，这会产生：

registering observer
received callback register
number of callbacks: 1
calling 2 callbacks
callback called
callback called

如您所见，注册回调的数量突然变为 2，即使仅注册了 1 个回调。这怎么可能？我是否有盲点，或者这是否暗示了 React 的工作方式？

（*）我知道，这个问题可以通过一个被解决的组合useImperativeHandle和forwardRef。以上只是一个研究替代方案的实验，我要求的是学习目的。

回答

function Main() {
  const observer = useRef(new Observer());

  useEffect(() => {
    observer.current.call();
  }, [observer]);

  return <SubComponent observer={observer.current} />;
}