Should the Components really extend PureComponent?

Hey, really awesome library, thanks so much for sharing!

tl;dr

I think that all Components that use render props should extend Component, instead of PureComponent.

Longer version

My colleague noticed that the <Form> component is a PureComponent, so he thought it’d be a good idea to maintain referential identity between renders, and define the render function in such a way that it would allow <Form> to opt-out of rerendering. Like so:

class Form2 extends Component {
  renderForm = ({ handleSubmit }) => {
    ...fancy rendering stuff
  };

  render() {
    return <Form render={this.renderForm} />;
  }
}

This works fine, as long as renderForm is a pure function, solely depending on it’s own parameters. However, as soon as you mix in state or props from the wrapping component (Form2 in the example), the renderForm function passed to <Form> will become stale.

This is all much better explained in the excellent article by @ryanflorence: https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

I think the quote most relevant for this issue is the following:

That means an inline render prop function won’t cause problems with shouldComponentUpdate: It can’t ever know enough to be a PureComponent.

As I understand it, if you use render props, you should never extend PureComponent, since you don’t know what’s going on inside the render function.

What are your thoughts?

[edorivai]

For what it’s worth, I asked around on twitter. Seems like it’s really preferred not to extend PureComponent when using render props.

Thread: https://twitter.com/EdoRivai/status/961930580702253056

Also, as quoted from the official React docs:

In cases where you cannot bind the instance method ahead of time in the constructor (e.g. because you need to close over the component’s props and/or state) <Mouse> should extend React.Component instead.

[klis87]

@edorivai good point with inlined render function, indeed PureComponent is always slower than Component without any benefit in this case.

I think you started a good discussion 😃