Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
60 lines (39 sloc) 2.97 KB

June 2 (discuss)


Getting Rid of PureRenderMixin

  • 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.

Proposal 1: PureComponent and heuristics for SFCs

  • 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.
Potential Mitigations
  • 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.

Proposal 2: SFCs Always Shallowly Compare Props

  • Effectively a PureRenderMixin on every SFC.
  • 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).

Proposal 3: createPureElement

  • 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.

ES Class Progress

  • 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.