Don’t Used “&&” for Conditional Rendering in React

It’s 2023, and it’s time to stop using the && operator for conditional rendering in React. There are a few reasons why:

• It’s prone to bugs. The && operator short-circuits, which means that it doesn't evaluate the second operand if the first operand is falsy. This can lead to unexpected results, especially if you're not careful. For example, the following code will render null to the DOM:

const isLoggedIn = false;

const MyComponent = () => {
  return isLoggedIn && <p>Welcome, user!</p>;
};

This is because the && operator will short-circuit on the first operand, which is false, and will never evaluate the second operand, which is the <p> element.

• It’s not very readable. Code that uses the && operator for conditional rendering can be difficult to read and understand, especially if the condition is complex.
• There are better alternatives. There are a few better alternatives to using the && operator for conditional rendering in React. Two popular options are the ternary operator and the logical OR (||) operator.

Ternary operator

The ternary operator is a conditional operator that takes three operands. The first operand is the condition, the second operand is the value to return if the condition is true, and the third operand is the value to return if the condition is false.

The following code shows how to use the ternary operator for conditional rendering:

const isLoggedIn = false;

const MyComponent = () => {
  return isLoggedIn ? <p>Welcome, user!</p> : null;
};

This code is more readable and less error-prone than the previous example.

Logical OR operator

The logical OR (||) operator returns the first operand if it's true, or the second operand if it's true. It's another good option for conditional rendering in React.

The following code shows how to use the logical OR operator for conditional rendering:

const isLoggedIn = false; const MyComponent = () => { return isLoggedIn || null; };

This code is even more concise than the previous example, but it’s still very readable and error-prone.

Conclusion

There are a few reasons why you should stop using the && operator for conditional rendering in React. It's prone to bugs, it's not very readable, and there are better alternatives available.

If you’re currently using the && operator for conditional rendering, I encourage you to switch to one of the alternatives discussed above. Your code will be more readable, more maintainable, and less error-prone.