Why we don't need to add semicolon to the end of jsx?

Question

I'm new to React and JSX, just a question on JSX syntax, we know we can do like:

export default function App() {
  return <h1>Hello World</h1>
}

but don't we need to add semicolon to the end of jsx ? As:

export default function App() {
  return <h1>Hello World</h1>;
}

I personally prefer to use semicolon, because it makes my code clear and more logical. — Rashid, Feb 18 '23 at 16:40

score 2 · Answer 1 · answered Dec 02 '22 at 22:12

JSX doesn't affect anything in this scenario compared to normal JS syntax.

export default function App() {
  return <h1>Hello World</h1>;
//^^^^^^                     ^
//       ^^^^^^^^^^^^^^^^^^^^
//  1             2          3
//keyword    expression   end of statement
}

When writing code using JSX syntax, each JSX expression is simply an expression, like any other expression. More specifically, each JSX expression is evaluated by the transpiler and converted into a function invocation expression — you can read more at the article JSX In Depth on the React website.

Whether you return a JSX value or a number value or a string value makes no difference in regard to the need for a semicolon.

const myValue = "hello world";

export default function () {
  return myValue;
//^^^^^^        ^
//       ^^^^^^^
//  1       2   3
//keyword   ^  end of statement
//      expression
}

Regarding semicolon usage: I won't get into the reasons why semicolons should be used — that has already been covered on this site.

score 0 · Answer 2 · answered Oct 10 '19 at 10:41

In javascript semicolons are optional in most situations because they are inserted automatically.

There are not many situations when you actually have to use them and there is an ongoing discussion between developers whether to write semicolons explicitly or not.

See http://www.bradoncode.com/blog/2015/08/26/javascript-semi-colon-insertion/ for more details.

Why we don't need to add semicolon to the end of jsx?

2 Answers2