title: value of using React.forwardRef vs custom ref prop
body: <p>I see that <code>React.forwardRef</code> 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=&quot;FancyButton&quot;&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=&quot;FancyButton&quot;&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>