Why do I need an extra set of parentheses for React .setState()?

Question

I'm going through the "Quick Start" portion of React's website, and it uses code that looks something like this:

toggleClicked() {
    this.setState(prev => ({
        isOn: !prev.isOn
    }));
}

Why do I need the extra parentheses around the function block? I would think that it would look like this:

toggleClicked() {
    this.setState(prev => {
        isOn: !prev.isOn
    });
}

But this doesn't work. What do these parentheses mean?

Answer 1

The interpreter considers the { after => to be the start of a function block, rather than an object - so, wrap it in parentheses to make it clear that you're returning an object there, rather than defining a function.

this.setState(prev => ({
    isOn: !prev.isOn
}));

Answer 2

The braces around isOn: !prev.isOn is the object literal notation.

The parentheses immediately surrounding that is mandatory to indicate that the above braces represent an object literal instead of a function body. This distinction is necessary because the right hand side of a "fat arrow" (=>) can either be a proper function body (surrounded by braces) or an expression (which is an implicit return). In the latter case, it's possible for that expression to be an object literal, which will be confusing for the parser (I'm sure the TC 39 committee studied the language grammar and concluded that it's not possible for the parser to distinguish the two use cases without the help of explicit parentheses).

The next outer parentheses are the delimiters of the arguments passed to setState.

The outer most pair of braces are the delimiters of the function body of toggleClicked.