Curly braces { } versus parenthesis ( ) in ReactJS

In the beginning of your career when learning ReactJS and ES6 Javascript syntax, it can be confusing when to use curly braces { } and when to use parenthesis ( ).

How braces { } are used?

1) Curly braces { } are special syntax in JSX. It is used to evaluate a JavaScript expression during compilation. A JavaScript expression can be a variable, function, an object, or any code that resolves into a value.

Let’s take an example.

  • Evaluating a JavaScript variable
const yellowStyle={color: 'yellow'} 
<Star style={yellowStyle} />

which is same as

<Star style={{color: 'yellow'}} />
  • Evaluating a function or an event handler
class PopUp extends React.Component {
  // es7 way of setting default state
state = {
visible: true;
}
  render() {
return <Modal onClose={this._handleClose}/>;
}
  _handleClose = () => {
this.setState({ visible: false });
}
}

2) This is not be confused with Class methods in ES6 which also uses curly braces { }

class StarsComponent {
constructor(size) {
this.size = size;
}
  // Curly braces are used to define a method body in a class
get size() {
return this.size;
}

// ReactJS library comes with a predefined render() method
render() {
return <div>*</div>;
}
}

const stars = new StarsComponent(5);

console.log(stars.size); // 5

How parenthesis ( ) are used?

  1. Parenthesis are used in an arrow function to return an object.
() => ({ name: 'Amanda' })  // Shorthand to return an object

That is equivalent to

() => {
return { name : 'Amanda' }
}

2. Parenthesis are used to group multiline of codes on JavaScript returnstatement so to prevent semicolon inserted automatically in the wrong place.

Let’s talk about some fundamentals.

It is not necessary to add a semicolon in JavaScript. JavaScript engine automatically inserts a semicolon at the first possible opportunity on a line after a return statement. If the JavaScript engine places the semicolon where it should not be, your code won’t compile.

Let’s take a look at the following code.

  • Ney, this doesn’t compile.
class StarsComponent {
constructor(size) {
this.size = size;
}

render() {
return <div> // <--JavaScript engine inserts semicolon here
*
</div>
}
}
  • Yay, this works.
class StarsComponent {
constructor(size) {
this.size = size;
}

render() {
return (<div>
*
</div>) // <--JavaScript engine inserts semicolon here
}
}

Why? When you place your opening bracket on the same line as return:

return (

You are telling JavaScript engine that it can’t automatically insert a semicolon until the bracket is closed.

return (
...
...
); <-- inserts semicolon at the end of parenthesis

For a single line statement, we don’t need to wrap it inside brackets.

class StarsComponent {
constructor(size) {
this.size = size;
}

// Not required to wrap brackets around a single line of code
render() {
return <div>*</div>;
}
}