dakom · GitHub

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...)

Read the original on github.com ↗