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 => {
	console.log('rendering Batih');
	return <div> {props.whatever} </div>;
}
const purify = Component => {
	let memo;
  let oldProps= {whatever: 1};
	return props => {  	
    if (memo && oldProps.whatever === props.whatever) {
      console.log('not rendering: ');
      return memo;
    } else {
      console.log('I\'m rendering');
      oldProps.whatever = props.whatever + 1;
      memo = <Component {...props} />;
      return memo;
    }
  }
}	

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"))
});