Making components with curly brackets versus parenthesis when using functional components

Question

What is the difference between using curly brackets and parenthesis whne making functional components in JSX. I have a components called layout which displays props.children

But i want to know if there is a difference or a best practise between when to use what, and for what purpose.

const layout = (props) => {
<Aux>
<div>Toolbar, SideDrawer, Backdrop</div>
<main>
    {props.children}
</main>
</Aux>
}

versus

const layout = (props) => (
<Aux>
<div>Toolbar, SideDrawer, Backdrop</div>
<main>
    {props.children}
</main>
</Aux>
)

This was likely discussed numerous times on SO. It is specific to arrow function syntax, not React. — Estus Flask, Nov 08 '18 at 07:46
possible duplicate of [Arrow functions and the use of parentheses () or {} or ({})](https://stackoverflow.com/questions/49425755/arrow-functions-and-the-use-of-parentheses-or-or/49425823#49425823) — Shubham Khatri, Nov 08 '18 at 07:58

Estus Flask · Accepted Answer · 2018-11-08T07:57:04.557

Only the second snippet is correct. => (...) is implicit arrow function return. Parentheses are there for readability and consistency with multiline explicit return statement. It could be:

const layout = (props) => 
  <Aux>
  ...
  </Aux>

With proper indentation and no parentheses a hanging indent makes function harder to read.

In order for the first snippet to work, there should be explicit arrow function return:

const layout = (props) => {
  return (
    <Aux>
    ...
    </Aux>
  )
}

Notice that parentheses are needed if return and <Aux> are on different lines.

Making components with curly brackets versus parenthesis when using functional components

1 Answers1