Will using functions to render content hurt react performance?

Question

This article (and other places) mention now calling functions inside of render:

https://levelup.gitconnected.com/optimize-react-performance-c1a491ed9c36?ref=reddit

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 slightly harder to read.

class HelpModal extends React.Component {
  state = { visible: false };

  renderContent = () => {
    if (this) {
      return <div />
    } 
    if (that) {
      return <span />
    }
  }
  render() {

    return (
      <Modal visible={this.state.visible}>
         {this.renderContent()}
      </Modal>
    );

  }
}

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?

Tobias · Accepted Answer · 2017-12-15 12:01:37Z

4

It depends on how you use inline functions.

React calls the render function after props and/or state changes. Each time they change the render function is called.

If you compute things that haven't changed because of the new props/state values then this inline function has indeed a negative impact on your app's performance.

Example:

render() {
    <div>
        { this.props.items.map(() => <SomeComponent />) }
    </div>
}

If you compute it here or anywhere else doesn't change the fact that you need to compute it each time the render function is called. No negative effect at all.

computeStaticStuff(x, y) {
    return x + y > 0 ? <p /> : <i />;
}

render() {
    <div>
        { () => this.computeStaticStuff(5, 6) }
    </div>
}

This would be a ((n) extremely stupid) example of recomputation that is not needed at all.

answered Dec 15, 2017 at 12:01

Tobias

9548 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Will using functions to render content hurt react performance?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related