With React JSX, does placing a static value prop in curly braces incur any overhead?

Question

I know we can pass dynamically changing props in a JSX element like so:

<label htmlFor={dynamicId}/>

And we can pass static values like so:

<label htmlFor="staticId"/>

But what about the following:

<label htmlFor={'staticId'}/>

Is there an (albeit minor) performance overhead in the last line (internal React caching mechanism/ new string on every render)? Is the last line of code a bad practice or does it just not matter?

Answer 1

They're exactly equivalent. You can use Babel's playground to try it out:

[
  <label htmlFor="staticId"/>,
  <label htmlFor={'staticId'}/>
]

transpiles to

[
  React.createElement("label", { htmlFor: "staticId" }),
  React.createElement("label", { htmlFor: "staticId" })
];

Answer 2

No. It doesn't. React performance is very fast.

Using curly brace, you're telling to React to try to evaluate it and find a string. You're just taking a step longer.

At the end, result will be the same.

Though, I would recommend you to use without the curly brace if it is just a string and not a variable.