CODEWITHSUNDEEP
javascriptreactjs
AndreasWeller
AndreasWeller

Reputation: 147

Infinite loop in React button

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

Answers (1)

lenybernard
lenybernard

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

Related Questions