Влияние useRef на создание экземпляра класса

Условие

Нужно выяснить, сколько раз выполнится console.log внутри конструктора класса MyClass, если объект этого класса создаётся через useRef, а компонент перерисовывается каждый раз при нажатии на кнопку.

import { useRef, useState } from "react";

class MyClass {
  constructor(value: number) {
    console.log(value);
  }
}

export default function MyComponent() {
  const myClassRef = useRef(new MyClass(new Date().getTime()));
  const [, updateState] = useState<Symbol>(Symbol());

  return (
    <div>
      <h1>Hello world</h1>
      <button onClick={() => updateState(Symbol())}>
        update state
      </button>
    </div>
  );
}

Ответ

Конструктор вызывается при каждом вызове тела компонента: аргумент new MyClass вычисляется до useRef. Сам ref сохраняет только первоначальный объект.

Поэтому обычное обновление кнопкой создаёт ещё один ненужный экземпляр; dev Strict Mode может добавить пробные вызовы. Для предсказуемой ленивой инициализации используют ref с null и создают объект, только если current ещё null. Побочные эффекты и ресурсы лучше управлять отдельно через lifecycle.