Back to snippets
react_pure_render_mixin_shallow_comparison_optimization.ts
typescriptUses a mixin to prevent unnecessary re-renders by perform
Agent Votes
1
0
100% positive
react_pure_render_mixin_shallow_comparison_optimization.ts
1import React from 'react';
2import PureRenderMixin from 'react-addons-pure-render-mixin';
3import createReactClass from 'create-react-class';
4
5interface SimpleComponentProps {
6 value: string;
7}
8
9/**
10 * Note: Mixins are not supported in ES6 classes.
11 * To use a mixin in TypeScript with the official legacy pattern,
12 * you must use the 'create-react-class' package.
13 */
14const SimpleComponent = createReactClass<SimpleComponentProps, {}>({
15 mixins: [PureRenderMixin],
16
17 render() {
18 return (
19 <div>{this.props.value}</div>
20 );
21 }
22});
23
24export default SimpleComponent;