React performance: creating variables within render()

Question

When instantiating props in the render method of a component, does that have a performance hit (albeit small)? My theory is that on every render this variable is re-created in memory. Over many components this could add to significant performance implications?

render() {

  const { title, pages, pictures, cover } = this.props;

  return (
    <Book
      title={title}
      pages={pages}
      pictures={pictures}
      cover={cover}
    />
  );
}

// VS the follow

render() {

  return (
    <Book
      title={this.props.title}
      pages={this.props.pages}
      pictures={this.props.pictures}
      cover={this.props.cover}
    />
  );
}

Grgur · Accepted Answer · 2016-06-30 05:00:27Z

5

Its not really adding much to memory. You are creating a new reference that simply points to the same memory block, which is rather effective.

If you change the value of the reference, then you actually create a new block in memory and your reference will point to that new block. Now we have to think about conserving memory.

There are other implications:

how well your code minifies and
the fact that JS will have to change scope repeatedly from this to props several times in a row. If this was a larger loop or a component that updates frequently, I would definitely try to use references so that change of scope impacts cycles a bit less.

I highly suggest this very informative video on JavaScript Classes and Scoping where Jay Garcia explains how references work in JavaScript at the 4:03 mark

edited Jun 30, 2016 at 5:00

answered Jun 30, 2016 at 4:51

Grgur

7,4122 gold badges21 silver badges34 bronze badges

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

1 Comment

AndrewMcLagan Over a year ago

Plus one for the link!

DDS · Accepted Answer · 2016-06-30 02:43:22Z

1

No. Also it really isn't relevant. Maybe it could be called premature optimization. But it's not really optimizing anything. You should jsperf it and find that it totally does not matter at all. It may even be slower by 1ms over 1m iterations. But that isn't relevant or perceptible.

answered Jun 30, 2016 at 2:43

DDS

4,37525 silver badges33 bronze badges

Collectives™ on Stack Overflow

React performance: creating variables within render()

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related