Skip to content
Flint
Blog

bracedStatements

Disallow unnecessary JSX curly braces around literals and JSX elements.

✅ This rule is included in the jsx stylistic presets.

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

Section titled “Examples”
CE6dCsp ansty="le--0:#E2817F;--1:#B238">3sp><4{sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#ECC48D;--1:#984E">4DHel1<1"sp ansty="le--0:#E2817F;--1:#B238">3<4}sp ansty="le--1:#8844">CA<E6dCd ivclassNa="meec-li">A82ComponeAsp ansty="le--0:#E2817F;--1:#B238">3sp><4{sp ansty="le--1:#8844">CE6spCsp ansty="le--0:#D6DEEB;--1:#403F">53Tesp>CA<E6spCsp ansty="le--0:#E2817F;--1:#B238">3sp><4}sp ansty="le--0:#7FDBCA;--1:#8844">AE<82ComponeAd>d ivclassNa="meec-li">CE6dCsp ansty="le--0:#E2817F;--1:#B238">3sp><4{sp ansty="le--0:#7FDBCA;--1:#8844">A82ChildComponeAE sp ansty="le--0:#E2817F;--1:#B238">3sp><4}sp ansty="le--1:#8844">CA<E6dCd>d ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D spans="tyle--0:#D6DEEB;--1:#40">3F53H><44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">D4<4AE< spans="tyle--0:#F78C6C;--1:#AA">0982Compo<44AE spans="tyle--0:#7F">DB< spans="tyle--0:#CA">ECE6<>D spans="tyle--0:#D6DEEB;--1:#40">3F53><44AE spans="tyle--0:#7F">DBECE6DBC0982Compo4<4AE >divclass="Nameec-"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">DB< spans="tyle--0:#F78C6C;--1:#AA">0982ChildCompo<><44AE spans="tyle--0:#7F">DBCA ECE<6div spans="tyle--0:#7F">D

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

Section titled “Options”

This rule is not configurable.

When Not To Use It

Section titled “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

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”