title: Warning when using react hooks in HoC
body: <p>I've created a a higher order component that is supposed to add some additional functionality to my components. However, when I use react hooks in this component, I get the following eslint warning.</p>
  
  <blockquote>
    <p>React Hook "React.useEffect" cannot be called inside a callback. React
    Hooks must be called in a React function component or a custom React
    Hook function. (react-hooks/rules-of-hooks)</p>
  </blockquote>
  
  <p>Why am I getting this warning? Is it considered bad practice to use hooks in a HoC?</p>
  
  <p>Minimal example:</p>
  
  <pre><code>const Hello = props =&gt; &lt;p&gt;Greetings {props.name}&lt;/p&gt;;
  
  const Wrapper = Component =&gt; props =&gt; {
    React.useEffect(() =&gt; {
      // Do something here
    }, []);
    return &lt;Component {...props} /&gt;;
  };
  
  export default Wrapper(Hello)
  </code></pre>
  
  <p>codesandbox:
  <a href="https://codesandbox.io/s/proud-tree-5kscc" rel="noreferrer">https://codesandbox.io/s/proud-tree-5kscc</a></p>