title: What is the difference between returning an invoked function vs JSX directly?
body: <p>What is the difference between</p>
  <pre><code>const Component = () =&gt; {
    const renderLeft = () =&gt; {
        return (
          &lt;LeftDiv ..../&gt;
        )
    }
    const renderRight = () =&gt; {
        if (something) return null;
        return (
          &lt;RightDiv ..../&gt;
        )
    }
    ...
  
    return (
      &lt;&gt;
        {renderLeft()}
        {renderRight()}
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>and</p>
  <pre><code>const Component = () =&gt; {
  
    return (
      &lt;&gt;
        &lt;LeftDiv ..../&gt;
        &lt;CenterDiv ..../&gt;
        {something &amp;&amp; &lt;RightDiv ..../&gt;}
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>(besides fewer lines of code)?</p>
  <p>For context, I sometimes see code written in method #1 in our codebase (but I prefer #2 but am not too sure how to articulate why one is better besides readability), and I was not sure if there are any performance differences between the two methods.</p>