Few days ago I was thinking about using react in my case. The case is simple: I have a list of object and it handles fast updates like in example above:

var ListItem = React.createClass({
    render: function() {
        return (
            <tr>
                <td>{this.props.data.sign}</td>
                <td>{this.props.data.a}</td>
                <td>{this.props.data.b}</td>
                <td>{this.props.data.time}</td>
            </tr>
        );  
    }
});

var List = React.createClass({
    getInitialState: function() {
        return { items: list };
    },
    tick: function() {
        var index = Math.floor(Math.random() * 100);
        var randItem = getRandomItem();
        var item = this.state.items[index];

        item.sign = randItem.sign;
        item.a = randItem.a;
        item.b = randItem.b;
        item.time = randItem.time;  

        this.setState({items: tick(this.state.items)});
    },
    ponentDidMount: function() {
        this.interval = setInterval(this.tick, 0);
    },
    render: function() {
        return (
            <table>
                {this.state.items.map(function(item){
                    return <ListItem key={item.i} data={item} />    
                })}
            </table>
        );
    }
});

This is the full link to example i've prepared:

/

The problem is that it takes about 25-30% usage of my CPU. I have tested that in other machines and it's the same. It's normal for React ? In my opinion it's pretty weird but I'm totally new in that library so I wanted to ask more experienced people. Tell me if I'm doing something wrong. Thanks in advance.

Few days ago I was thinking about using react in my case. The case is simple: I have a list of object and it handles fast updates like in example above:

var ListItem = React.createClass({
    render: function() {
        return (
            <tr>
                <td>{this.props.data.sign}</td>
                <td>{this.props.data.a}</td>
                <td>{this.props.data.b}</td>
                <td>{this.props.data.time}</td>
            </tr>
        );  
    }
});

var List = React.createClass({
    getInitialState: function() {
        return { items: list };
    },
    tick: function() {
        var index = Math.floor(Math.random() * 100);
        var randItem = getRandomItem();
        var item = this.state.items[index];

        item.sign = randItem.sign;
        item.a = randItem.a;
        item.b = randItem.b;
        item.time = randItem.time;  

        this.setState({items: tick(this.state.items)});
    },
    ponentDidMount: function() {
        this.interval = setInterval(this.tick, 0);
    },
    render: function() {
        return (
            <table>
                {this.state.items.map(function(item){
                    return <ListItem key={item.i} data={item} />    
                })}
            </table>
        );
    }
});

This is the full link to example i've prepared:

https://jsfiddle/zsjmp3ph/

The problem is that it takes about 25-30% usage of my CPU. I have tested that in other machines and it's the same. It's normal for React ? In my opinion it's pretty weird but I'm totally new in that library so I wanted to ask more experienced people. Tell me if I'm doing something wrong. Thanks in advance.

• javascript
• reactjs

2 Answers 2

By setting a state with setInterval, you force React to rerender the ponent very often. It will not be 0 ms, but some lower boundary defined by the browser. See setInterval() behaviour with 0 milliseconds in JavaScript

If your app is consumed by humans, there is no point in rendering UI more often than once in 16ms. So You need to batch it.

One possible solution would be https://github./petehunt/react-raf-batching

It will make the whole react batch DOM changes to requestAnimationFrame. This might brake your other ponents, if they are assuming that render doesn't take 16ms at most.

Even better solution would be to call your tick from requestAnimationFrame callback, essentially utilizing this optimization just for your List, not for your whole app.

Thanks for your replies :) Sorry but I haven't specified that setInterval is only example, but if I change it to for example 100, it's the same situation with CPU. In my app, I'm getting data through websockets and sometimes I've getting huge amounts in short period of time (10-20ms) so it's generating problems. App is based on angular and my ng-repeat is going crazy with that.