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

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

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

• Управление фокусом, выделением текста или анимациями на дочернем элементе.

• Интеграция с библиотеками, которые требуют прямого доступа к DOM (например, D3, jQuery).

• Создание переиспользуемых компонентов (например, кастомных инпутов), где родитель может управлять фокусом.

Пример:

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

function Parent() {
  const inputRef = useRef(null);
  const handleClick = () => inputRef.current.focus();

  return (
    <>
      <CustomInput ref={inputRef} />
      <button onClick={handleClick}>Фокус</button>
    </>
  );
}

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