Why is it best practice to surround JSX assigned to variables with parenthesis?

Question

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

Answer 1

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.