title: Exporting in React higher order components
body: <pre><code>function logProps(WrappedComponent) {
    class LogProps extends React.Component {
      componentDidUpdate(prevProps) {
        console.log('old props:', prevProps);
        console.log('new props:', this.props);
      }
  
      render() {
        return &lt;WrappedComponent {...this.props} /&gt;;
      }
    }
  
    return LogProps;
  }
  
  
  class FancyButton extends React.Component {
    focus() {
      // ...
    }
  
    // ...
  }
  
  // Rather than exporting FancyButton, we export LogProps.
  // It will render a FancyButton though.
  export default logProps(FancyButton);
  </code></pre>
  
  <p>I have taken these pieces of code from the react documentation, however i am confused about what actually happens during </p>
  
  <pre><code>export default logProps(FancyButton);
  </code></pre>
  
  <p>My thoughts are that it probably calls the function logProps which in React is considered a higher order component which in that case it should being with capital letter to avoid ambiguity.
  The logProp function defines a class component LogProps, the class component LogProps renders an argument component FancyButton. The class component LogProps is then returned from the function. </p>
  
  <pre><code>import FancyButton from './FancyButton';
  
  const ref = React.createRef();
  
  // The FancyButton component we imported is the LogProps HOC.
  // Even though the rendered output will be the same,
  // Our ref will point to LogProps instead of the inner FancyButton component!
  // This means we can't call e.g. ref.current.focus()
  &lt;FancyButton
    label="Click Me"
    handleClick={handleClick}
    ref={ref}
  /&gt;;
  </code></pre>
  
  <p>The returnedcomponent(LogProps, FancyButton) from the function logProps is then imported and instantiated at </p>
  
  <pre><code>&lt;FancyButton
    label="Click Me"
    handleClick={handleClick}
    ref={ref}
  /&gt;  
  </code></pre>
  
  <p>Is this correct?</p>