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?'

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?'

• javascript
• reactjs

• I tested it on Chrome and couldn't reproduce at all. Here's the test code: codepen.io/zvona/pen/YyYRVx?editors=001 – Samuli Hakoniemi Commented Oct 21, 2015 at 11:01
• Thanks! As I said, I can't reliably reproduce it either, but it does pop up every few times I load my page. – AndreasWeller Commented Oct 21, 2015 at 11:07
• Does it occur right away or only once you click? Could you be invoking the function in you onClick attr instead of assigning it? Also, what else does your onClick function do in your actual source? I'd start looking for a bug in the React code before thinking it could be something with the setup FWIW – user463231 Commented Oct 21, 2015 at 14:35
• @ChrisHawkes: No console errors. – AndreasWeller Commented Oct 21, 2015 at 15:48
• @Mat: It occurs only when I click. I use the code as shown, so I'm sure I assign the function, not invoke it, right? The onClick function doesn't do anything else, I narrowed down the problem to the function in the example and it still persists. – AndreasWeller Commented Oct 21, 2015 at 15:50

1 Answer 1

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: