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.