title: What exactly makes the difference between a "React function" in contrast to a "regular Javascript function"?
body: <p>The react docs boldly state that hooks shall only be called inside <strong>&quot;React functions&quot;</strong>:</p>
  <p><a href="https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions" rel="nofollow noreferrer">https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions</a></p>
  <p>&quot;Don’t call Hooks from <strong>regular JavaScript</strong> functions.&quot;</p>
  <p>That raises the question what <em>precisely</em> distinguishes a React function from a regular js function. Is it the return of a JSX Element? How about those functions:</p>
  <pre><code>function F1() { return &lt;div&gt;hello&lt;/div&gt; } // certainly can use hooks 
  
  function F2() { return F1() }   // can use hooks? is a react function? is a regular js function?
  function F2() { return &lt;F1 /&gt; } // makes no difference, right?
  
  function F3(s) { return &lt;div&gt;{s}&lt;/div&gt; } // is a react function because uses jsx?  
  
  function F4() { return F3(&quot;bugs bunny&quot;) }
  
  function F5({s}) { return &lt;div&gt;{s}&lt;/div&gt; }
  </code></pre>
  <p>They all return a JSX Element. But I am not sure that f2 or f4 really are React functions and participate in the hook attachment. The way we pass arguments should only not matter. So the question: What exactly makes the difference?</p>
  <p>(I know how JSX, hyperscript work, no need to explain those basics. I just did not look into the internals of the hook system.)</p>