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.