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?

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?

• javascript
• reactjs
• ecmascript-6

• 2 This is because the code inside braces ({}) is parsed as a sequence of statements. – guijob Commented Mar 23, 2018 at 3:14
• in short, its saying the {} are not the start of a function body, but are a dictionary. Since there are no other parameters, this is just saying 'return the dictionary'. – john k Commented Oct 8, 2024 at 19:09

2 Answers 2

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
}));

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 mittee 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.