value of using React.forwardRef vs custom ref prop : <p>I see that React.forwardRef seems to be the sanctioned way of passing a ref to a child functional component, from the react docs:</p>

<pre><code>const FancyButton = React.forwardRef((props, ref) =&gt; (
  &lt;button ref={ref} className="FancyButton"&gt;
    {props.children}
  &lt;/button&gt;
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
&lt;FancyButton ref={ref}&gt;Click me!&lt;/FancyButton&gt;;
</code></pre>

<p>However, what is the advantage of doing this over simply passing a custom prop?:</p>

<pre><code>const FancyButton = ({ innerRef }) =&gt; (
  &lt;button ref={innerRef} className="FancyButton"&gt;
    {props.children}
  &lt;/button&gt;
));

const ref = React.createRef();
&lt;FancyButton innerRef={ref}&gt;Click me!&lt;/FancyButton&gt;;
</code></pre>

<p>The only advantage I can think of is maybe having a consistent api for refs, but is there any other advantage? Does passing a custom prop affect diffing when it comes to rendering and cause additional renders, surely not as the ref is stored as mutable state in the <code>current</code> field?</p>

<p>Say for example you wanted to pass multiple refs (which tbh, might indicate code smell, but still), then the only solution I can see would be to use customRef props.</p>

<p>I guess my question is what is the value of using <code>forwardRef</code> over a custom prop?</p>
