Why I don't like to use logical AND operator in JSX?
In this post I will explain the reason I do not like to use logical AND inside the return statement of React component, giving examples on how it can break your app and showing how to improve the implementation to avoid the errors.
When I started the blog, I made a list of subjects I'd like to cover in the blog, and this bug related to the logical AND operator was on the list. This week at work, a QA guy reported a bug and voilà, the bug I'd like to talk. I asked for permission to share the bug here on the blog and they allowed me.
So, here it is
As we can see, the page should show a list of orders and if there is no order to show, it should display the message "No Orders Found".
The problem here is this random 0 displayed above the message.
Let's check the code that render this part of the page.
We can see in the first line that a condition using the logical AND (&&) operator defines when to render the tables and the pagination.
Let's check how the && operator works to understand the problem.
Logical Operators in Javascript
The best way to understand this operators are thinking on if: If (something) return (another thing).
Logical AND
The logican AND is represented by the && operator and,
Given the example expr1 && expr2, if expr1 can be converted to false, this expression will return expr1, otherwise it will return expr2.
The values that can be converted to false are: 0, null, undefined, false, NaN and the empty string ("").
With this, we can already see the problem on the code above, accountOrders is an array and if it's length is zero it will return zero, otherwise it will return the tables and pagination. When the array has at least one element, it means, there is at least one order, everything will be fine, but when there is no element, the bug shows up.
Before we continue, let me talk about the logical OR, to complement the knowledge.
Logical OR
The logical OR is represented by the ?? operator and given the example expr1 ?? expr2, if expr1 can be converted to true, it will return expr1, otherwise, returns expr2.
Excluding the values that are converted fo false, showed above, every other value is converted to true.
The logical OR is not usefull in return statement of React components, but it can be usefull in other situations, so it's always good to have it in mind.
Another bad scenario
The other case that logical AND can lead to an error is when the expression is undefined and the render returns only the logical AND expression.
For example,
As expr is undefined and there is no other element to be rendered, React will return a Runtime Error, because it cannot render undefined.
When we want to render nothing, we should use null.
This issue with undefined was solved on React 18, but if your using React 17 or some previous version you should be careful with this error.
How to solve the problem?
To avoid this errors, we can use the ternary operator, that gives us more control on what we want to render. This operator works as an if ... else...
For example,
if (expr) { return (something) }
else { return (another thing) }
And with the ternary operator notation,
expr ? something : another thing
It means, if expr is true, the operator will return something, else it will return another thing.
The examples of the accountOrders and the example for the undefined could be like this:
In the examples above, we can see that if the logical expression we would like to check is converted to true we are going to return the component we would like, otherwise, it will return null, because we are saying it should be null and not letting it implicity, that the return should be the value of the false converted expression.
Conclusion
In this post we saw two scenarios that could lead to an error when using the logical AND operator in the return of React component. Even with this two scenarios being very specific and one of them already solved by React 18, I believe that using this operator is not the best practice in this situation, knowing that we can use the ternary operator that cannot cause any error.
In my projects I work with ternary operator only, but if you want to use the logical AND operator, after reading this post, I'm sure you will be more careful to not break or cause any strange behavior to your app.
Hope you like this content and if you have any suggestion for future posts, let a comment below.