Menu
So, I have been experimenting with ReactJS and I have been testing its performance when loading lots of data, and I have noticed it to be quite taxing. In particular, I noticed that after my demo application loads a few thousand rows, it starts to use hundreds of megabytes. Left long enough, at about 10,000 rows, it will surpass a gigabyte of RAM used.
Edit: I believe the high RAM usage was caused by having the React DevTools window open. It seems that using that significantly increased how much RAM is being used. However, without it open, it will still use a few hundred MB (up to 500MB, as low as 350MB) which I believe is quite a lot for just a big list.
I have provided my app below. It is entirely self-contained, so just create a file (index.html or whatever) and put all this text in it, and run the file (or optionally host it on a web server to have access to the React DevTools).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React</title>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
ol {
margin-left: 50px;
list-style-type: none;
}
p { display: inline; }
img {height: 1em; }
</style>
<script type="text/babel">
class ListItem extends React.Component {
render() {
return(<li><p>{this.props.index}.</p> <input type="checkbox" /><img src="http://www.tastyislandhawaii.com/images/spam_musubi/spam_can_open.jpg" /><a href="#">HELLO I AM SPAM NICE TO MEET YOU</a></li>);
}
}
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
TICK_INTERVAL: 500,
ROWS_PER_TICK: 100,
adding: false,
list: [],
total: 0,
count: 0
};
this.start = this.start.bind(this);
this.stop = this.stop.bind(this);
this.addMore = this.addMore.bind(this);
}
start() {
console.log("starting adding");
this.setState({adding: true, total: 20000});
setTimeout(this.addMore, this.state.TICK_INTERVAL);
}
stop() {
console.log("stopping adding");
this.setState({adding: false, total: 0});
}
addMore() {
console.log("adding more...", this.state.adding);
let tempCount = this.state.count;
let tempList = [];
for (let temp = 0; tempCount < this.state.total && temp < this.state.ROWS_PER_TICK && this.state.adding; temp++) {
tempList.push(<ListItem key={tempCount} index={tempCount}/>);
tempCount++;
}
this.setState({list: this.state.list.concat(tempList), count: tempCount});
if (this.state.count < this.state.total) {
if (this.state.adding) {
setTimeout(this.addMore, this.state.TICK_INTERVAL);
}
} else {
this.setState({adding: false});
}
}
render() {
let button;
if (this.state.adding) {
button = <button type="Submit" className="btn btn-danger" onClick={this.stop}>HALT!</button>
} else {
button = <button type="Submit" className="btn btn-success" onClick={this.start}>BOOM!</button>
}
return(<div>{button}<ol>{this.state.list}</ol></div>);
}
}
ReactDOM.render(<List/>, document.getElementById("root"));
</script>
</head>
<body><div id="root"></div></body>
</html>
555
Recommended Hardware Requirements: Processor: Pentium 4 (or equivalent) 4 GB RAM. Hard disk space: 20 GB.
Basically always when your React application is slow it's due to too many components re-rendering or too often. React have very useful Developer Tools, where you can profile your App and then find out which components are taking most of the time to render.
The problem was in the React DevTools extension. While it was active, it would cause the RAM usage of the app to skyrocket. When I loaded up my app after killing the process (and I didn't open React DevTools) my app used a normal amount of RAM.
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
