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?

Sulthan · Accepted Answer · 2017-04-29T12:21:16.970

2

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.

edited Apr 29 '17 at 12:21

answered Apr 29 '17 at 08:05

Sulthan

123,697
21
207
260

Oh. I'm using `createClass` , wouldn't it be a big change ? – eugene Apr 29 '17 at 12:17
1

@eugene `createClass` is deprecated but it isn't a big change really. The conversion is simple. – Sulthan Apr 29 '17 at 12:18

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

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 {
}

edited May 23 '17 at 10:31

Community

1
1

answered May 10 '17 at 01:55

RBT

21,293
19
144
210

react PureRenderMixin alternatives?

2 Answers2