React Pure Component

Mixins are no longer usable in es6, es7 land. So we can not use pure render mixin in classes. Higher Order Components can help us mitigate this problem.

• Mixins are dead
• React Mixins are on their way out

Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts. There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. React just making another doesn’t help that effort.

• Composition to the rescue

To be clear, mixins is an escape hatch to work around reusability limitations in the system. It’s not idiomatic React. Making composition easier is a higher priority than making arbitrary mixins work. I’ll focus on making composition easier so we can get rid of mixins.

Installation

npm i react.pure.component --save

es7

import {Component} from 'react';
import PureComponent from 'react.pure.component';

@PureComponent
class App extends Component {
  render() {
    return (
      <div> Hello Pure World </div>
    );
  }
}

export default App;

es6

import {Component} from 'react';
import PureComponent from 'react.pure.component';

class App extends Component {
  render() {
    return (
      <div> Hello Pure World </div>
    );
  }
}

export default PureComponent(App);

es5

const React = require('react');
import PureComponent from 'react.pure.component';

const App = React.createClass({
  render() {
    return (
      <div> Hello Pure World </div>
    );
  }
})

module.exports = PureComponent(App);