Что такое forwardRef и когда он используется?

Что такое forwardRef?

forwardRef — это функция из библиотеки React, которая позволяет компоненту принимать ref и передавать его дальше, обычно к DOM-элементу или другому компоненту. По умолчанию ref не передается через пропсы, поэтому для его проброса используется forwardRef.

Когда это нужно?

• Управление фокусом на инпуте внутри кастомного компонента.
• Интеграция с библиотеками, которые требуют прямого доступа к DOM (например, анимации или сторонние UI-библиотеки).
• Измерение размеров или позиции элемента.

Пример кода

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

const CustomInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

function App() {
  const inputRef = useRef(null);

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

  return (
    <>
      <CustomInput ref={inputRef} placeholder="Type here" />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

Как это работает?

Компонент, обернутый в forwardRef, получает второй аргумент — ref. Этот ref можно привязать к любому DOM-элементу внутри компонента. Родитель использует useRef() и передает его как пропс ref. React автоматически пробрасывает ref через forwardRef.

Вывод

forwardRef полезен, когда нужно сохранить доступ к DOM-элементу внутри компонента-обертки, не нарушая инкапсуляцию. Используйте его для фокуса, анимаций или интеграции с библиотеками, требующими прямого доступа к DOM.