JSFiddle - React, Tailwind, and code Playground

by giltig

HTML

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<div id="app">
</div>

Babel + JSX

const Batih = props => {
	return <div> {props.whatever} </div>;
}
let oldProps = {whatever: 1}; // should be Monad to save the old props
const purify = Component => props => {
	console.log(oldProps, props);
	if (props.whatever === oldProps.whatever) {
  	console.log('not rendering: ');
  	return true;
  } else {  	
  	console.log('I\'m rendering');
  	oldProps.whatever = props.whatever + 1;    
  	return <Component {...props} />;
  }
}

let Purifier = purify(Batih);
const App = (props) => {
	return (
  		<div>
      	<Purifier {...props} />        
      </div>
    );
}

var data = Rx.Observable.interval(300).scan((x, n) => (x+1)%12, 1);
let subscription = data.subscribe(x => { 
  ReactDOM.render(
  <App whatever={x} />
  , document.querySelector("#app"))
});