JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>
Babel + JSX
class App extends React.Component {
static propTypes = {
name: PropTypes.string,
};
constructor(props) {
super(props);
this.rafId = 0;
this.lastInvocationMs = 0;
this.loop = this.loop.bind(this);
this.state = {
ticker: 0
}
}
loop(time) {
if (time - this.lastInvocationMs >= 300) { // delta time since last frame > 300ms
this.lastInvocationMs = time;
this.setState((prevState, props) => { // removing this setState will stop creating listeners
ticker: prevState.ticker + 1
});
}
this.rafId = requestAnimationFrame(this.loop);
}
componentDidMount() {
this.rafId = requestAnimationFrame(this.loop);
}
render() {
return (
<p> Something </p>
);
}
}
ReactDOM.render(<App name="world"/>, document.getElementById('container'));