Зачем нужен React.forwardRef?

Question

[Евгений Обыкновенный]

В документации есть такой пример:

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const { label, ...otherProps } = props;
  return (
    <label>
      {label}
      <input {...otherProps} ref={ref} />
    </label>
  );
});

Это позволяет родительскому компоненту Form получить доступ к DOM-элементу .

function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
  }

  return (
    <form>
      <MyInput label="Enter your name:" ref={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}

Почему нельзя просто передать ссылку ref как параметр с другим именем myRef через пропсы? Вот так тоже вроде работает:

const MyInput = function MyInput(props) {
  const { label, myRef, ...otherProps } = props;
  return (
    <label>
      {label}
      <input {...otherProps} ref={myRef} />
    </label>
  );
};

function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
  }

  return (
    <form>
      <MyInput label="Enter your name:" myRef={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}

Не заметил никаких глюков. В чем подвох?

upd:

Возможно, есть отличие. Нужна проверка ref.current, он иногда может быть null и появляется ошибка. Ошибка появляется не всегда. Не понятно, связано ли это со ссылкой myRef.

if (ref.current) {
    ref.current.focus();
}

Comments

[Антон Горецкий]

вспомните как работает реакт. При изменении пропсов происходит перерисовка всего компонента, а это не совсем то что мы хотим при получении и потере фокуса. forwardRef это своеобразный хак, чтобы передать в компонент что-то в обход пропсов.

[Евгений Обыкновенный]

Антон Горецкий, значение ref меняется, когда делаем ref.current.focus()?

[WbICHA]

В чем подвох?

Ни в чём. Просто есть 2 способа.
В целом, это актуально для простых обёрток над хтмл элементами. Логично иметь стандартизированный реф для всех, как во всём реакте, а не плодить именованные рефы, чтобы потом смотреть "а какой сейчас использовать". Впрочем, никто не мешает использовать одно стандартизированное имя.

[Александр]

Посмотрите на useImperativeHandler