Closed
Description
Consider the following sample code: (pasted here too)
class extends React.Component {
private canRender: boolean = false;
private latestData: any;
constructor(props) {
super(props);
let nJobs = 0;
let lastRenderTime: number;
props.someObservableThing.listen(data => {
nJobs++;
this.latestData = data;
if (this.canRender) {
const now = performance.now();
this.canRender = false;
this.setState({
data: this.latestData,
jobsPerRender: nJobs,
fps: (lastRenderTime === undefined) ? 0 : 1000 / (now - lastRenderTime)
});
nJobs = 0;
lastRenderTime = now;
}
});
this.state = {};
}
/* Lifecycle */
componentDidMount() {
this.canRender = true;
}
componentDidUpdate() {
this.canRender = true;
}
render() {
outputStats(this.state);
return this.state.data === undefined ? null : <View {...this.state.data} />
}
}
When outputStats is hit - I'm getting framerates of like 2000fps. In other words requestAnimationFrame
does not seem to be a limiter for react itself.
Is this correct?
(as a slightly separate topic- if that is true, for animation things do you think it would be good to simply wrap the if (this.canRender) {}
block in a requestAnimationFrame()
? I guess that's not really a React question though since the observableThing could also be capped via ticks...)