consider this JSX code:
|
1 |
<p className={'white'}>Hello!</p> |
It isn’t incorrect, and once all the transforming and bundling is complete, at runtime we will end up with an element in the DOM with that class, as intended. But the issue is that this could be a little bit more efficient.
Every-time we put { something } in our JSX, this is marking a segment of code as a Javascript expression. This means that the compiler will treat these parts a bit differently, to put it simply this tells the compiler than this code will need to be evaluated at runtime.
So based on this, let’s consider why the code above is a little bit inefficient. By using className={‘white’} we have marked the value of this property as something that needs to be evaluated, but there is no need because React will accept this:
|
1 |
<p className="white">Hello!</p> |
This can now just be directly transformed with the value at compile time, and there is no need to invoke evaluation in the JS engine at runtime.
The example code I have used in this article will seem like VERY basic stuff, but I see this mistake all the time, and even if you are not making it, you might not have been aware of what your { } segments were actually denoting, and it is always good to understand the lower levels.