title: Difference between calling a function like <TestFunc /> or <>{TestFunc()}</> in React
body: <p>I came across something like this in our codebase the other day I got curious. What, if any, is the difference between these methods of calling a function (that returns JSX) in the return method of a React component?</p>
  <p><strong>A.)</strong></p>
  <pre class="lang-js prettyprint-override"><code>const TestXYZ = () =&gt; {
  
      const TestFunc = () =&gt; {
          return &lt;div&gt;This is some sample text&lt;/div&gt;;
      };
  
      return (
          &lt;&gt;
              &lt;TestFunc /&gt;
          &lt;/&gt;
      );
  };
  </code></pre>
  <p><strong>B.)</strong></p>
  <pre class="lang-js prettyprint-override"><code>const TestXYZ = () =&gt; {
  
      const TestFunc = () =&gt; {
          return &lt;div&gt;This is some sample text&lt;/div&gt;;
      };
  
      return &lt;&gt;{TestFunc()}&lt;/&gt;;
  };
  </code></pre>
  <p>Thanks for your help!</p>