bracedStatements

Disallow unnecessary JSX curly braces around literals and JSX elements.

✅ This rule is included in the jsx stylistic preset.

Curly braces are necessary in JSX to embed JavaScript expressions. However, when wrapping simple string literals or JSX elements in curly braces, they add unnecessary visual clutter without providing value. Prefer using the content directly when possible for improved readability.

Examples

❌ Incorrect

<div>{"Hello"}</div>
<Component>{<span>Text</span>}</Component>
<div>{<ChildComponent />}</div>

✅ Correct

<div>Hello</div>
<Component><span>Text</span></Component>
<div><ChildComponent /></div>

Note that curly braces are still necessary for expressions, variables, and more complex JavaScript:

<div>{variable}</div>
<div>{someFunction()}</div>
<div>{1 + 2}</div>

Options

This rule is not configurable.

When Not To Use It

If your codebase has a specific style guide that requires curly braces for consistency in certain contexts, you may choose not to enable this rule. However, most style guides prefer removing unnecessary braces for cleaner code.

Further Reading

• MDN: JSX in React
• React Documentation: JSX In Depth

Equivalents in Other Linters

• Deno: jsx-curly-braces