react PureRenderMixin alternatives?

Question

I'm trying to adopt shallowEqual and one way is to use PureRenderMixin.

But I'm trying to stay away from javascript mixins ( https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html)

I'm also using redux, and redux's connect gives the pure render functionality already. (which means redux connect is the HOC which provides pure-render)

So I can just connect components that needs pure-render, but I also read the distinction between dumb / smart components, and reluctant to connect every components.

Should I just use connect ? or is there a better way of doing this?

Answer 1

Use React.PureComponent.

import React from 'react';

class MyComponent extends React.PureComponent {
    render() {
       ...
    }
}

(React Top-Level API)

For an alternative, you can use the legacy shallow-compare addon but it will require you to implement shouldComponentUpdate in every component.

You should migrate your code to ES6 classes, createClass has been deprecated.

Answer 2

Declarative way of using PureRenderMixin is to use the @PureRender attribute at the top of your reactJs class as shown in the post here:

@PureRender
export default class UiWidget extends Component {
}