В чем разница между useRef и forwardRef?

Это инструменты одной темы (ref), но разного назначения: useRef создаёт ref, forwardRef пробрасывает его через компонент.

useRef — создать контейнер

const inputRef = useRef(null);
<input ref={inputRef} />        // DOM-элемент попадёт в inputRef.current

Хук возвращает стабильный объект { current } — для DOM-узлов или любых мутируемых значений, не вызывающих перерендер.

forwardRef — пропустить ref сквозь компонент

ref — не проп: на кастомном компоненте <MyInput ref={...} /> он не попадёт в props. До React 19 компонент должен был явно «переслать» его:

const MyInput = forwardRef(function MyInput(props, ref) {
  return <input ref={ref} {...props} />; // отдаём ref внутреннему input
});

// теперь родитель может:
const Parent = () => {
  const inputRef = useRef(null);          // useRef создаёт
  return <MyInput ref={inputRef} />;      // forwardRef доставляет
};

Как работают вместе

useRef живёт у владельца ссылки (родителя), forwardRef — у компонента-посредника. Цепочка: useRef → ref-атрибут → forwardRef → внутренний DOM-узел.

Дополнение — useImperativeHandle: вместо DOM-узла наружу отдаётся ограниченный API ({ focus, reset }).

Обновление React 19

В React 19 forwardRef больше не нужен: ref приходит обычным пропом — function MyInput({ ref, ...props }). Старый код с forwardRef продолжает работать.

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

useRef создаёт контейнер { current } (DOM или данные без перерендера). forwardRef — обёртка, пробрасывающая ref через кастомный компонент к внутреннему узлу, поскольку ref не передаётся как проп (до React 19; в 19-м ref стал обычным пропом). Работают в паре: родитель создаёт, посредник пересылает.