Какие есть Ref в функциональных компонентах?

В функциональных компонентах ref'ы представлены useRef (объектный ref) и callback ref; для проброса через компонент — forwardRef (до React 19), для публикации API — useImperativeHandle.

useRef — основной способ

const inputRef = useRef(null);
<input ref={inputRef} />
// после коммита: inputRef.current — DOM-узел

Стабильный контейнер { current } на всё время жизни компонента: DOM-узлы и любые мутируемые данные без ререндеров (таймеры, инстансы, флаги).

Callback ref — контроль момента привязки

const [height, setHeight] = useState(0);

const measureRef = useCallback((node) => {
  if (node) setHeight(node.getBoundingClientRect().height);
}, []);

<div ref={measureRef}>...</div>

Функция вызывается с узлом при присоединении и с null при отсоединении: измерения в момент появления, динамические списки ref'ов, реакция на условный рендеринг (когда useRef+useEffect пропустили бы появление узла). В React 19 callback ref может возвращать cleanup-функцию.

forwardRef — ref сквозь свой компонент

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

ref — не проп (до React 19), его нужно явно «пересылать». В React 19 ref приходит обычным пропом — forwardRef больше не обязателен.

useImperativeHandle — ограниченный API вместо узла

useImperativeHandle(ref, () => ({ focus: () => innerRef.current.focus() }), []);

Родитель получает { focus }, а не сырой DOM — инкапсуляция императивных методов (reset формы, управление плеером).

Коротко для собеседования

Функциональные компоненты: useRef (стабильный { current } для DOM и данных без ререндера), callback ref (функция-приёмник узла — измерения, динамические наборы, с cleanup в React 19), forwardRef для проброса ref через компонент (в React 19 ref — обычный проп) и useImperativeHandle для публикации узкого императивного API.