Short-circuit evaluation in React

When you're new to React, or JavaScript in general, you'll commonly see this syntax out in the wild and in tutorials:

That weird syntax on the fifth line is known as short-circuit evaluation. This pattern can be used to conditionally render components in React, however, there's a few gotchas.

What do you think this piece of code will render if headerCopy is equal to 0?

The answer here is a non-emphasized 0. Why? Since 0 is a false-y value and not one that React specifically ignores, you'll run into the "short-circuit" effect of this pattern– a zero will be rendered instead of nothing, which is likely what you would have wanted in this case.

It's pretty simple–you just have to remember a few rules. React will render anything that is not typeof, undefined, or a Boolean. So, in this instance, you have a few options.

Since Boolean is one of the types that React knows not the render, we can explicitly cast our value as a Boolean :

This won't be short-circuited as Boolean(headerCopy) will still evaluate to true but React knows not to render it.

If you've never seen that before, it's basically a shorter way to cast as a Boolean. If you're familiar with logical operators, you know that prefixing a value with a Bang (!) operator reverses the value of it. The only way to do this is to cast it as a Boolean, so JavaScript does that for you. The SECOND Bang flips it back to it's original truth-y/false-y value while keeping it casted as a Boolean. Confused? That's normal! Let's look at some examples:

With those examples in mind, what do you think !!0 would evaluate to? If you guessed false, you're right! Since 0 is false-y, and we're casting it, reversing it, and then flipping it back, it evaluates to it's associated Boolean value. So, how do we use that as a replacement to fix our short-circuit evaluations? Like this:

Boom! No worries about the actual type of the prop you're using on the left-side of the evaluation. Things will work as expected.

The last option for in-line conditional rendering involves doing a full ternary conditional. These are my preference as I often have a false state that I want to render for in the condition.

If you don't want to render anything in one of the conditions, simply pass null and React will ignore it:

In addition to these three methods, you can also things like bringing your component logic outside of the render and prepare it beforehand. It all depends on your preference though an argument could be made for readability of the above three options versus long-winded if/else blocks to determine which component to render. But, that's a topic for another post! 👋🏻