Why can I omit the return statement with parenthesis in React

Question

Fairly new to React with a potential silly question.

How is it possible that I can omit Reacts return statement with parenthesis.

const Nav = () => (
  <nav className="c_navbar">
    { some jsx magic here }
  </nav>
)

while I see other instances like this:

const Nav = () => {
  return (
    <nav className="c_navbar">
      { some jsx magic here }
    </nav>
  )
}

As far as I understand the () help when I return an object literal so that it doesn't mix it up with a code block. But I don't see this applicable here?

Thanks

Answer 1

The first snippet is implicit return. Parentheses are provided only for developer's convenience; it's possible to unambiguously parse the code without them, at the expense of readability:

const Nav = () =>
  <nav className="c_navbar">
    { some jsx magic here }
  </nav>

While the second snippet contains explicit return. This is the case when parentheses are commonly used in React, because when there's no optional expression right after return statement, there is no returned value.

  return
    <nav className="c_navbar">
      { some jsx magic here }
    </nav>

is parsed as

  return;
  <nav className="c_navbar">
    { some jsx magic here }
  </nav>

In order to be parsed correctly without parentheses, it should be:

  return <nav className="c_navbar">
    { some jsx magic here }
  </nav>

So parentheses are commonly used for consistency in both implicit and explicit returns and allow to improve the readability with proper indentation.

Answer 2

This is a JavaScript question not a React Question.

1) Parenthesis () are used in an arrow function to return an object.

() => ({ name: 'Amanda' })  // Shorthand to return an object

That is equivalent to

() => { // Block body
   return { name : 'Amanda' }
}

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

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.

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

More information can be found here: https://medium.com/@leannezhang/curly-braces-versus-parenthesis-in-reactjs-4d3ffd33128f

Answer 3

It's not particularly a react syntax but a JavaScript one. There are two types of body types for arrow function declaration

1. concise body - value is implicitly returned.
2. block body - an explicit return is required.

Refer to the MDN documentation for more info.

Answer 4

In JavaScript the ( params ) => x syntax is equivalent[1] to function( params ) { return x; }, so the return is there, it's just implicit.

If you have a function body wrapped in braces (e.g. a multi-statement body) inside an => function then there isn't an implicit return anymore.

e.g.

var someFunc1 = function( x, y, z ) {
    return x + y + z;
};

var someFunc2 = ( x, y, z ) => x + y + z;

var someFunc3 = ( x, y, z ) => {
    var result = x + y + z
    return result ;
}

---

[1] - Functions using => are like function()-functions, but they also have implicit this binding that cannot be re-bound which makes them suitable for event-handlers in web-page scripts, for example.