Infinite loop in React button

Question

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

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
– 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
– 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
– user463231, Commented Oct 21, 2015 at 14:35
@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
– AndreasWeller, Commented Oct 21, 2015 at 15:50

lenybernard · Accepted Answer · 2024-11-19 19:45:10Z

22

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:

edited Nov 19, 2024 at 19:45

answered Apr 20, 2017 at 14:27

lenybernard

2,45823 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Infinite loop in React button

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related