Reputation: 147
This simple React button class triggers an infinite loop on click (i.e. logging 'click!' to the console 100s of times):
///////////////////////////////////////////////////////////////////////////////////////////
// TestButton.js
exports.TestButton = React.createClass({
onClick: function(event) {
event.preventDefault();
event.stopPropagation();
console.log('Click!')
},
render() {
return (
<div>
<button type="button" onClick={this.onClick}>Click me!</button>
</div>
)
}
});
///////////////////////////////////////////////////////////////////////////////////////////
// main.js
var TestButton = require('./TestButton.js').TestButton;
ReactDOM.render(
<div>
<TestButton/>
</div>,
document.getElementById('main')
);
The infinite loop is not triggered every time, but around every 10th time I load the page and click the button (in a non-repeatable manner). It's independent of the browser I use.
Any ideas where this is coming from?
I know this isn't repeatable in a JS-fiddle. The question is 'Where should I start to look in my setup for where this condition is coming from? Browserify? Imported scripts? React itself?'
Upvotes: 8
Views: 10273
Reputation: 2448
I had almost the same symptoms, my onclick callback function was called in a loop:
<Button onClick={this.close(id)}>
Close
</Button>
I finally understood my mistake. A closure is expected otherwise It's running the function...
<Button onClick={() => this.close(id)}>
Close
</Button>
Whe the onClick
event is trigger, the anonymous function is called and executes this.close(id)
.
You don't need in ES6 to do the same when the callback is not a class function or if it doesn't have any param but otherwise, you need to use arrow functions to simply pass the function:
Upvotes: 22