Как обработчик события ref в реакции сохраняется между рендерингами?

Потому что при каждом повторном рендеринге React регенерирует обработчик и присоединяет его к новому узлу DOM.

Вы бы написали такой компонент:

export default function App() {
  return (
    <button
      onClick = {(e) => {
        console.info(e.target);
      }}
    >
      button
    </button>
  );
}

И каждый повторный рендеринг может заставить React выполнить что-то вроде этого:

// Call `App` as a funtion
// Every thing inside the `App` funtion body will be executed again
// So you get a new onClick handler inside the funtion which will be attach to the new DOM node
const element = App();

render(element);

Что касается Ref, то он похож. Когда вы вызываете useRef, вы получаете такой объект: { current: null }

// `ref` is passing to the component on every re-render
// `ref` object dose not change on every re-render, but it's property `current` will be assigned with the new DOM node.
<button ref = {ref}>button</button>

Это чрезвычайно упрощенный код, который не отражает того, как на самом деле работает React, но в нем есть смысл.

Вроде недоразумение. Когда узел DOM изменяется, ваш обработчик событий не сохраняется. Это ответственность только вашего кода. Но узел DOM не меняется с каждым рендером. React сравнивает возвращенный результат с предыдущим и решает, какие узлы DOM необходимо заменить.

Если вы хотите использовать собственное событие, вы должны обязательно подключать и отсоединять обработчик событий при каждом изменении узла.

const rootChanged = useCallback(element => element.addEventListener(type, listener),[]);

// ...

<div ref = {rootChanged} key = {someVolatileKey}>
  // ...
</div>

Когда key изменится, например, React создаст новый узел для корневого элемента.