3

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)});
    },
    componentDidMount: 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.net/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.

Donut
  • 71
  • 1
  • 4

2 Answers2

5

By setting a state with setInterval, you force React to rerender the component 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.com/petehunt/react-raf-batching

It will make the whole react batch DOM changes to requestAnimationFrame. This might brake your other components, 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.

Community
  • 1
  • 1
Capaj
  • 4,024
  • 2
  • 43
  • 56
  • Good point Capaj! The 0ms (10 real ms) interval will generate an unrealistic scenario of page updates. requestAnimationFrame() will help, but if the frequency is **that** big in reality, I recommend combining that with setTimeout() in order to defer all updates in an 100ms period to a single page repaint. – NicolaeS Aug 16 '15 at 10:29
0

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.

Donut
  • 71
  • 1
  • 4
  • In that case, you should try sticking with Angular. Performance of ng-repeat is on par with React when you use 'track by' in your ng-repeat expression. You save the user the overhead of having to download another big JS file. Keep in mind that is is best to batch the changes-when your data gets back from the server via websocket, don't do scope.$apply immediately, rather do RAF and do scope.$apply inside it's callback. That should be better. – Capaj Aug 16 '15 at 12:44