16

In the example below the output is the same for both x and y. I've seen React code written both ways. Is there a difference? As many of the React code examples I see utilize the parenthesis syntax, I assume there is a reason. If it's best practice, then why is it best practice to surround JSX assigned to variables with parenthesis? If there is another reason what is it?

let x =  <div> Hello World! </div>;
let y = (<div> Hello World! </div>);

console.log(x,y);
Bruce Seymour
  • 1,520
  • 16
  • 24
  • 1
    The question in your title is not the same as the question in the text. Which one are you really asking? – Barmar Jul 19 '18 at 16:23
  • The usual reasons to add parentheses are either to override default operator precedence (not necessary here if the results are the same), or just to make the intent clearer to readers of the code. – Barmar Jul 19 '18 at 16:25
  • While returning multiline JSX, It's better to use brackets or you might face issue as mentioned in this answer. https://stackoverflow.com/questions/41898972/reactjs-valid-react-element-or-null-must-be-returned/41899469#41899469 – Hardik Modha Jul 22 '18 at 06:09

3 Answers3

19

In general parentheses are used to wrap the JSX code for code clarity...That is,

let y = <ul>
    <li>
        Hello World!
    </li>
</ul>;

is ugly but correct

let y = 
    <ul>
        <li>
            Hello World
        </li>
    </ul>;

is better formatted but syntactically incorrect (will give error on compilation).

So the solution is to use 

let y = (
    <ul>
        <li>
            Hello World
        </li>
    </ul>
);

which is the best of both worlds.

UPDATE : The reason for the second code being incorrect is Automatic Semicolon insertion. Thanks to @EricKing for pointing that out.

ManavM
  • 2,918
  • 2
  • 20
  • 33
  • For a further explanation as for why the second example is incorrect (and why the parentheses fixes it), you can read about [automatic semicolon insertion](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion). – Eric King Jul 19 '18 at 21:04
  • I think the Automatic semicolon insertion link in your answer is incorrect. It points to some unrelated question on stackoverflow. – D_S_X Nov 22 '19 at 19:54
  • 1
    @EricKing Also i'm not getting any error using second syntax. See https://codesandbox.io/s/crazy-frog-d05ly. (let me know if the link is not working) – D_S_X Nov 22 '19 at 21:23
7

It is advised that way for two reasons,

One, It helps javascript interpreter to find the end of assignment, as sometimes, the interpreter might read statement like return , which is present in the middle of the code and end the assignment right there.

Second, It helps with readability & indentation, whoever reads the code understands where assignment ends.It is very easy to lose track when you are reading through a big file.

return 
  <div> Your text here </div>

will be interpreted as

return;
<div> Your text here </div>;

So, to avoid this, prefer parentheses around JSX

return (
    <div> 
       Your text here 
    </div>
)
mdsadiq
  • 788
  • 1
  • 9
  • 11
1

While assigning HTML code to a variable (jsx), parenthesis won't make much difference, but I would like to point out its advantage while using arrow functions or even while making a stateless component.

const FunctionName = () => {
 return <p>Hello World </p>;
};

notice in the above code we have to write the return keyword while using the curly braces, but if you want to be more concise you can use parenthesis...

const FunctionName = () => (
 <p> Hello World </p>
); 

//or write it in one line as well

const FunctionName = () => ( <p> Hello World </p> );
Ashley Fernandes
  • 1,179
  • 10
  • 18
  • This doesnt seem to answer the question..for example why not write the return statement as `return (

    Hello World

    );`.     – ManavM Jul 20 '18 at 09:43
  • You can write it this way but parenthesis allow you to omit the return keyword which is a more concise way , which is actually the reason for using parentheses. I have just not stated it explicitly in my answer above. I can edit my answer if you want.. – Ashley Fernandes Jul 20 '18 at 10:41
  • I never said that what you're saying is incorrect..just that it doesn't answer the question. All the above ways of writing code are correct, so are the two example the OP gave...the question is what makes one better than the other. And yes it would be nice if you could edit your answer to explain **why** one is preferred rather than what is preferred. – ManavM Jul 20 '18 at 10:45
  • The parentheses *don't* allow you to omit the return keyword, it's removing the braces that does that. You can have `const FunctionName = () =>

    Hello World

    ;`.     – jonrsharpe Mar 17 '21 at 08:25