june-02.md

June 6, 2016 · View on GitHub

June 2 (discuss)

This is one of the most commonly used mixins.
We need to have a good story around applying it to classes and SFCs (stateless functional components).
Let’s consider a few alternatives.

Create React.PureComponent base class (kinda like a class with PureRenderMixin).
Make SFCs “inherit” their purity from the closest class-based parent.
This works because if the class above is pure, SFC wouldn’t re-render anyway.
Implemented in #6914 with some additional explanation here.

Any heuristics based model will probably not work in 100% of cases, and could cause confusion.
If you pass children through, you don’t know anything about them, including whether they use mutation.

Warn if a PureComponent takes in a child element (or child element which changes).
In dev mode, do dry-run reconciliation past all shouldComponentUpdates and warn if shouldComponentUpdate lied to React.

Means that component authors generally can’t / shouldn’t use SFCs because PureRenderMixin shouldn’t be used with components that take children.
Intuitively, people expect SFCs to behave like functions. The bailout would be surprising, and there isn’t a particularly good way of discovering why the function isn’t behaving like a normal JavaScript function.
Performance. It’s not clear that adding PureRenderMixin to every SFC would actually improve overall performance (because it means extra reads/compares, retaining objects longer and into subsequent GC generations, etc).

Provide some flag on components at the calling side to denote that they should be pure.
This would tell React to effectively “use PureRenderMixin” on that particular instance, not all instances.
Many syntax possibilities: pure={true}, or <*Component />, React.createPureElement(), etc.

Ben is leading the effort to port Facebook codebase to ES classes.
We plan to enable property initializer syntax internally, and codemod all methods except lifecycles to it.

Please feel free to discuss these notes in the corresponding pull request.