> Что такое forwardRef в React и для чего он используется? (React)

Короткий ответ

forwardRef - это функция в React, которая позволяет передавать ref от родительского компонента к дочернему. Она нужна, когда необходимо получить доступ к DOM-элементу или экземпляру компонента внутри дочернего компонента, который обычно скрывает свою внутреннюю структуру. forwardRef оборачивает компонент и принимает два параметра: props и ref.

Подробное объяснение

В React ref - это способ получить прямой доступ к DOM-узлу или экземпляру классового компонента. По умолчанию ref не передаётся через props, как обычные данные, потому что ref - это специальный атрибут, который обрабатывается React особым образом. Если вы попытаетесь передать ref как обычный prop, React выдаст предупреждение.

forwardRef решает эту проблему. Он создаёт компонент, который принимает ref в качестве второго аргумента после props. Это позволяет пробросить ref через несколько уровней вложенности к нужному DOM-элементу или компоненту.

Основные сценарии использования:

• Управление фокусом, выделением текста или анимациями в дочерних компонентах
• Интеграция с библиотеками, которые требуют прямого доступа к DOM (например, D3, jQuery)
• Создание переиспользуемых компонентов, которые должны предоставлять ref для внешнего использования (например, кастомные инпуты, модальные окна)

На практике

forwardRef часто применяется в компонентах высшего порядка (HOC) или при работе с библиотеками, где нужно получить доступ к DOM-элементу внутри компонента-обёртки. Например, если вы создаёте кастомный Input компонент, вы можете использовать forwardRef, чтобы родитель мог установить фокус на этот инпут.

Также forwardRef используется в комбинации с useImperativeHandle, чтобы ограничить доступ к методам экземпляра компонента и предоставить только определённый интерфейс.

Пример кода

JSX
import React, { forwardRef, useRef } from 'react';

// Дочерний компонент, который принимает ref
const CustomInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

// Родительский компонент
function Parent() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={inputRef} placeholder="Введите текст" />
      <button onClick={handleFocus}>Фокус на инпут</button>
    </div>
  );
}

Как отвечать на собеседовании

Начните с определения: forwardRef - это функция для передачи ref дочернему компоненту. Объясните, что ref не передаётся через props по умолчанию, и forwardRef решает эту проблему. Приведите пример использования: управление фокусом, интеграция с DOM-библиотеками. Упомяните, что forwardRef часто используется с useImperativeHandle. Не углубляйтесь в сложные сценарии, если вас не попросят.

Что проверяет интервьюер

Интервьюер проверяет понимание механизма ref в React, знание ограничений передачи ref через props, умение объяснить практическую пользу forwardRef. Также оценивается способность привести корректный пример и связать forwardRef с другими API (например, useRef, useImperativeHandle).

Типичные ошибки

• Путаница между forwardRef и useRef: useRef создаёт ref, а forwardRef передаёт его.
• Попытка передать ref как обычный prop без forwardRef.
• Забывание, что forwardRef принимает функцию с двумя аргументами (props, ref), а не один.
• Неправильное использование forwardRef с функциональными компонентами без обёртки.