title: Will using functions to render content hurt react performance?
body: <p>This article (and other places) mention now calling functions inside of render:</p>
  
  <p><a href="https://levelup.gitconnected.com/optimize-react-performance-c1a491ed9c36?ref=reddit" rel="nofollow noreferrer">https://levelup.gitconnected.com/optimize-react-performance-c1a491ed9c36?ref=reddit</a></p>
  
  <p>I've always used a pattern for large React class components where I'll move some of the JSX out of the render function into methods. This avoids having a billion little one-time-use separate components and it also avoids having to put lengthy if/then or ternary logic inside of a render area which I find <em>slightly</em> harder to read.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class HelpModal extends React.Component {
    state = { visible: false };
  
    renderContent = () =&gt; {
      if (this) {
        return &lt;div /&gt;
      } 
      if (that) {
        return &lt;span /&gt;
      }
    }
    render() {
  
      return (
        &lt;Modal visible={this.state.visible}&gt;
           {this.renderContent()}
        &lt;/Modal&gt;
      );
  
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've seen this strategy in a bunch of places, but now it sounds like, based on the above blog post, that this may be a bad practice performance-wise?</p>