Представьте ситуацию, когда вам нужно поставить фокус в инпут. Для input’а, который есть на странице в момент загрузки — никаких проблем, в документации указано как использовать ref. Остается только вызвать метод .focus()

Но если элемента на странице нет, например, по клику на «Логин» появляется модальное окно, и в нем нужно установить фокус в input…

Ситуация так же решается с помощью ref 😉

class Input extends Component {
  focus() {
    this.el.focus();
  }
  
  render() {
    return (
      <input
        ref={el=> { this.el = el; }}
      />
    );
  }
}

Так как у стрелочных функций нет своего this, мы можем удобно присвоить в this.el (то есть Input.el в нашем случае) необходимый html-элемент. Именно html. У которого уже есть все методы, описанные в MDN. Отлично, теперь у нас есть метод, который установит фокус в инпут. Остается его откуда-то вызывать.

<code>
class SignInModal extends Component {
  componentDidMount() {
    this.InputComponent.focus();
  }
  
  render() {
    return (
      <div>
        <label>User name: </label>
        <Input
          ref={comp => { this.InputComponent = comp; }}
        />
      </div>
    )
  }
}
</code>

При этом, как говорится в оригинале: Note that when you use ref on a component, it’s a reference to the component (not the underlying element), so you have access to its methods.

Перевод: когда вы используете ref на компонент, то этот ref ссылается на компонент, а не на «низлежащий» html-код. Поэтому можно использовать методы компонента. Что мы и сделали, используя запись: this.InputComponent.focus()