When should I use curly braces { } and parenthesis ( ) in React?

How braces { } are used

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

    }

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?

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

Parenthesis are used to group multiline of codes on JavaScript return statement 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>;
  }
}