Коли варто використовувати React refs? Коли не варто?

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

Що це і навіщо

Refs (reference) у React – об’єкт, що зберігає посилання на DOM‑елемент або інстанцію класового компонента. Вони потрібні, коли треба виконати операції, які не піддаються декларативному опису: встановити фокус, виміряти розміри елемента, інтегрувати сторонні бібліотеки (наприклад, jQuery, D3), або викликати методи інстанції.

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

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

Як це працює

1. Компонент створює ref (const inputRef = useRef(null);).
2. У JSX передає ref={inputRef}.
3. Після монтінгу React встановлює inputRef.current в реальний DOM‑елемент.
4. Компонент може звертатися до inputRef.current у колбеках, useEffect тощо.

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

import { useRef, useEffect } from 'react';
function FocusInput() {
  const input = useRef<HTMLInputElement>(null);
  useEffect(() => input.current?.focus(), []);
  return <input ref={input} />;
}

Тестування

Для тестів можна перевірити, що ref.current не null після рендеру:

const { getByRole } = render(<FocusInput />);
expect(getByRole('textbox')).toHaveFocus();

Коли не варто використовувати refs

• Управління станом: для зміни значень полів слід використовувати useState або контекст.
• Логіка рендеру: якщо можна описати поведінку декларативно, refs не потрібні.
• Тестованість: прямий доступ до DOM ускладнює ізоляцію компоненту.

Переваги та недоліки

• Перевага: простий спосіб взаємодії з DOM‑елементами.
• Недолік: порушує декларативний підхід, може призвести до непередбачуваних побічних ефектів.

Альтернативи

• Controlled components: управління значенням через value/onChange.
• React Hook Form: для форм без refs.

Чеклист діагностики

Часті помилки

1. Використання ref у функціональному компоненті без useRef() – створює новий об’єкт при кожному рендері.
2. Заміна ref на useRef(null) у класовому компоненті – слід використовувати createRef().
3. Забудьте про очищення – при демонтажі компоненту current стає undefined, тому слід перевіряти.
4. Використання ref для управління станом – краще використовувати useState.
5. Неправильний тип – у TypeScript треба вказати правильний тип елемента (HTMLInputElement, HTMLDivElement тощо).
6. Виклик методу до монтінгу – current буде null.
7. Використання ref у списку елементів без ключа – може призвести до неправильного прив’язування.
8. Зміна ref у циклі – не рекомендується, бо створює новий об’єкт.

Cheatsheet

• const ref = useRef(null); – створити ref.
• <div ref={ref}> – прив’язати.
• ref.current?.focus(); – встановити фокус.
• useEffect(() => { /* після монтінгу */ }, []); – доступ до DOM.

Follow‑up питання

1. Як можна об’єднати refs з useCallback для оптимізації?
2. Чому використання refs у класових компонентах відрізняється?
3. Які альтернативи існують для інтеграції D3 у React без refs?