title: Forwarding Refs: forwardedRef is always null
body: <p>I have an ant design <code>Table</code> component that I want <code>ref</code> to be attached to.</p>
  
  <p>I want to be able to use the <code>tableRef</code> in HOC <code>withCustomPagination</code>'s lifecycle <code>componentDidUpdate</code> method.</p>
  
  <p>Following the <a href="https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-in-higher-order-components" rel="nofollow noreferrer">React Docs Forwarding Refs</a>, that I could not clearly comprehend. I could cook up the following code:</p>
  
  <p><em>App.js</em></p>
  
  <pre><code>import WrappedTable from '/path/to/file';
  
  class App extends React.Component {
    render() {
      const tableRef = React.createRef();
      return (
        &lt;WrappedTable ref={tableRef} /&gt;
      )
    }
  }
  </code></pre>
  
  <p><em>Table.js</em></p>
  
  <pre><code>import withCustomPagination from '/path/to/file';
  
  class Table extends React.Component {
    constructor(props) {
      super(props); 
    }
  
    render() {
      &lt;TableContainer ref={this.props.forwardedRef} /&gt;
    }
  }
  
  const WrappedTable = withCustomPagination(Table);
  export default WrappedTable;
  </code></pre>
  
  <p><em>withCustomPagination.js</em></p>
  
  <pre><code>import CustomPagination from 'path/to/file';
  
  const withCustomPagination = tableRef =&gt; Component =&gt; {
    class WithCustomPagination extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          rows: 1,
          dataLength: props.dataLength,
        }
      }
  
      componentDidUpdate() {
        tableRef.current.state ..... //logic using ref, Error for this line
        this.state.rows ..... //some logic
      }
  
      render() {
        const { forwardedRef } = this.props;
        return (
          &lt;Component {...this.state} ref={forwardedRef} /&gt;
          &lt;CustomPagination /&gt;
        )
      }
    }
    return React.forwardRef((props, ref) =&gt; {
      return &lt;WithCustomPagination {...props} forwardedRef={ref} /&gt;;
    });
  }
  
  export default withCustomPagination;
  </code></pre>
  
  <p>After debugging, I find that <code>forwardedRef</code> is always null.</p>
  
  <p><a href="https://i.stack.imgur.com/odl4B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/odl4B.png" alt="Debug session screenshot"></a></p>