title: React Function Higher Order Component
body: <p>Higher Order Component not working for functional component. </p>
  
  <p>I am trying to create a sample functional HOC. I am using react hook useState and passing the state to the passed component. Below is my code</p>
  
  <pre><code>function HOC(WrapperComponent) {
    // outside of return function
    const [course] = useState({ id: 0, name: "Raja/Kondla" });
    return function() {
       return &lt;WrapperComponent course={course} /&gt;;
    };
  }
  
  const Comp = HOC(({ course }) =&gt; {
    return (
      &lt;&gt;
        &lt;div&gt;HOC&lt;/div&gt;
        &lt;div&gt;{course.id}&lt;/div&gt;
        &lt;div&gt;{course.name}&lt;/div&gt;
        &lt;div&gt;-------------------&lt;/div&gt;
      &lt;/&gt;
    );
  });
  
  ReactDOM.render(&lt;Comp /&gt;, rootElement);
  </code></pre>
  
  <p>When I run it I am getting below error.
  <B></p>
  
  <p>Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
  
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app
  </B></li>
  </ol>
  
  <p>but if I put below code as HOC working fine.</p>
  
  <pre><code>function HOC(WrapperComponent) {
    return function() {
        // inside return function
      const [course] = useState({ id: 0, name: "Raja/Kondla" });
      return &lt;WrapperComponent course={course} /&gt;;
    };
  }
  </code></pre>
  
  <p>getting the result output:</p>
  
  <pre><code>HOC
  0
  Raja/Kondla
  </code></pre>
  
  <p>Can someone explain me what is the reason? and using functional HOC, will there be any performance impact?</p>
  
  <p>Thanks in advance</p>