title: Can I use useState inside HOC (High order component)?
body: <p>I have a HOC (High order component) that returns a functional component.
  I want to use useState but I get this error message:</p>
  <p><em>“src/HOC.js
  Line 5:35:  React Hook &quot;useState&quot; 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”</em></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  const HOC = (Component, data) =&gt; {
      return () =&gt; {
          const [count, setCount] = useState(data); // Error here
          const handleClick = () =&gt; {
              setCount(count + 1);
          };
          return (
              &lt;Component
                  countNumber={count}
                  handleClick={handleClick}
              /&gt;
          )
      }
  };
  
  export default HOC;
  </code></pre>
  <pre><code>import React from &quot;react&quot;;
  import HOC from &quot;./HOC&quot;;
  
  const LikesCount = ({countNumber, handleClick}) =&gt; {
      return (
          &lt;div&gt;
              {countNumber} &lt;br /&gt;
              &lt;button onClick={handleClick}&gt;Like&lt;/button&gt;
          &lt;/div&gt;
      );
  }
  
  const EnhancedLikes = HOC(LikesCount, 5);
  
  export default EnhancedLikes;
  </code></pre>
  <p>Is there any way to use useState in this HOC scenario?</p>