use React.PureComponent
and react-skinnable instead.
A collection of small React Component helpers
mark a Component as pure (perf)
import { pure } from 'revenge';
@pure // will add a default shouldComponentUpdate implementation
class UserCard extends React.Component {}
split logic and rendering (testability)
import { skinnable } from 'revenge';
@skinnable() // or @skinnable(mytemplate)
class UserCard extends React.Component {
getLocals() { // logic here
return {
name: this.props.user.name;
};
}
template(locals) { // rendering here
return <p>{locals.name}</p>;
}
}
wrap "template" components in a "smart/container" component
import { skinnable, contains } from 'revenge';
const UserCard = ({ name }) => <p>{name}</p>;
@skinnable(contains(UserCard))
class UserCardContainer extends React.Component {
getLocals() {
// ...complex logic to obtain data...
return { name };
}
}