A diferença é que, quando você utiliza o nome ref
, está aderindo a uma convenção já estabelecida na comunidade. Portanto, se um componente que você desenvolve irá exigir, de quem o consome, uma referência, utilizar React.forwardRef
é mais adequado já que poderá utilizar o nome ref
.
Uma outra diferença é que, ao contrário de inputRef
(que é, de fato, uma prop), ref
não é passada a componentes como propriedade. Isso é mencionado na documentação.
Não vou explicar como o React.forwardRef
funciona porque a documentação já é extremamente clara no assunto.
Eventualmente, mais de uma referência precisa ser passada ao componente. Nesses casos, você é obrigado a passar as próximas via props. É o caso da inputRef
, mencionada na pergunta.
Da documentação linkada por você:
inputRef
, of type ref
, pass a ref
to the input element.
E no final ainda diz:
The ref
is forwarded to the root element.
De fato, se verificarmos o código-fonte do componente em questão, pode-se confirmar que ele utiliza o React.forwardRef
para encaminhar a referência qualificada como ref
. A propriedade inputRef
, pois, torna-se necessária já que mais de uma referência pode ser utilizada nesse componente, tal que:
ref
é encaminhada ao componente (interno) TextFieldRoot
;
inputRef
é encaminhada ao componente (também interno) InputComponent
.