У чому різниця між createRef і useRef?

Повне пояснення

Що це і навіщо

• createRef – API для класових компонентів, що повертає новий об’єкт reference ({ current: null }) кожного разу, коли компонент створюється.
• useRef – хук для функціональних компонентів, що повертає той самий reference‑об’єкт між рендерами.

Ключові принципи

• Обидва типи reference мають поле current, яке можна змінювати.
• createRef створює новий об’єкт при кожному рендері, тому його не слід використовувати в циклі рендеру.
• useRef створюється один раз при монтуванні і зберігає значення, що дозволяє уникнути зайвих перерисувань.

Як це працює

• При createRef React під час рендеру присвоює DOM‑елементу ref.current.
• При useRef React просто зберігає об’єкт, і після рендеру ref.current оновлюється.

Практика і реалізація

// Класовий компонент
class MyComponent extends React.Component {
  inputRef = createRef<HTMLInputElement>();
  render() {
    return <input ref={this.inputRef} />;
  }
}

// Функціональний компонент
function MyComponent() {
  const inputRef = useRef<HTMLInputElement>(null);
  return <input ref={inputRef} />;
}

Тестування

• Для createRef можна перевірити, що this.inputRef.current містить DOM‑елемент після монтуючого життєвий цикл.
• Для useRef тестують, що значення не змінюється між рендерами: expect(inputRef.current).toBeDefined();.

Особливості в контексті React

• createRef часто використовується у класах, коли потрібна нова reference на кожен рендер (наприклад, у списках з динамічними елементами).
• useRef є більш гнучким для функціональних компонентів і дозволяє зберігати будь‑яке мутабельне значення (наприклад, таймери, попередні пропси).

Оптимізація та типові помилки

• Використання createRef у функціональних компонентах призводить до створення нових об’єктів при кожному рендері, що може вплинути на продуктивність.
• Замість createRef у функціональних компонентах слід застосовувати useRef.

Диагностика

• Якщо ref.current повертає null, перевірте, чи компонент вже монтувався і чи правильно передається атрибут ref.
• Якщо reference оновлюється занадто часто, перевірте, чи не створюєте ви новий createRef у циклі рендеру.

Часті помилки (8)

1. Використання createRef у функціональних компонентах.
2. Передача ref в компонент, який не підтримує forwardRef.
3. Зміна current без використання state, що не викликає перерисування.
4. Неочікуване оновлення current під час асинхронних операцій.
5. Застосування ref до елементів, що не існують у DOM (наприклад, <Fragment>).
6. Заміна ref на інший об’єкт без оновлення компонента.
7. Використання ref у списку без ключа, що призводить до повторного створення reference.
8. Неочікуване очищення current у useEffect без dependency‑масиву.

Cheatsheet

• createRef → класові компоненти, новий об’єкт на рендер.
• useRef → функціональні компоненти, стабільний об’єкт між рендерами.
• ref.current → DOM‑елемент або будь‑яке мутабельне значення.
• forwardRef → передача ref через компонент.

Follow‑up питання

1. Як useRef можна використовувати для зберігання таймеру?
2. Чому createRef не підходить для функціональних компонентів?