Puedo encontrar varios ejemplos/documentos que explican cómo podemos pasar una referencia a un componente de función usando forwardRef pero nunca encontré ninguna explicación POR QUÉ usamos forwardRef en absoluto.

Aquí está mi codepen para demostrar mi punto.

En ambos casos, al hacer clic en el botón "Enfocar" junto a la entrada, la entrada se enfocará a la izquierda. La primera entrada utiliza forwardRef mientras que la segunda no.

Aquí está el código fuente para SEO:

 import * as React from "https://cdn.skypack.dev/react@17.0.1"; import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1"; const WithForwardRef = React.forwardRef((props, ref) => { return <input type="text" placeholder="WithForwardRef" ref={ref} />; }); const WithoutForwardRef = ({ myRef }) => { return <input type="text" placeholder="WithoutForwardRef" ref={myRef} />; } function App() { const ref1 = React.useRef(); const ref2 = React.useRef(); return ( <> <div> <WithForwardRef ref={ref1} /> <button onClick={() => ref1.current.focus()}>focus</button> </div> <hr> <div> <WithoutForwardRef myRef={ref2} /> <button onClick={() => ref2.current.focus()}>focus</button> </div> </> ); } ReactDOM.render(<App />, document.getElementById("mainApp"));