JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
<div id="app"></div>
Babel + JSX
let funcRenders = 0
const Func = function (props) {
funcRenders++
return <div>{props.foo} {funcRenders}</div>
}
Func.prototype.isPureReactComponent = true
let pureRenders = 0;
class Pure extends React.PureComponent {
render () {
pureRenders++;
return <div>{this.props.foo} {pureRenders}</div>;
}
}
const App = (props) => {
return (
<div>
<Func {...props} />
<Pure {...props} />
</div>
);
}
setInterval(() => {
ReactDOM.render(
<App foo="foo" />
, document.querySelector("#app"))
}, 300);