Avoid unsafe "&&" Operator for Conditional Rendering in React and Next.js

Let's talk about something we all know when developing our project using React: Conditional Rendering.

When it comes to Conditional Rendering in React, there are multiple ways to implement it. One of the favorite ways among developers is using && operator.

const Text = (isDisplayed) => {
  return (
    <div>
      // this one
      {isDisplayed && <p>{text}</p>}
    </div>
  );
};

Basically, if the condition is true, a HTML <p> element with a specific text will be displayed. Otherwise, it won't be rendered at all.

But have you ever checked all the possible values that can be true and false? If not, let's check out the results below!

// Truthy values

// boolean
{true && <p>😸</p>}

// number
{20 && <p>😸</p>}

// string
{"string" && <p>😸</p>}

// object
{{} && <p>😸</p>}

// array
{[] && <p>😸</p>}

// function
{(() => {}) && <p>😸</p>}

// symbol
{Symbol("symbol") && <p>😸</p>}

// All of them will render <p>😸</p> ✅

So far, we haven't had to worry much about truthy conditions. But now, have you ever thought about what happens when the condition is falsy?

// Falsy values

// null - this won't render anything ✅
{null && <p>😸</p>}

// undefined - this won't render anything ✅
{undefined && <p>😸</p>}

// boolean - this won't render anything ✅
{false && <p>😸</p>}

// NaN - this will render NaN 🤯 ❌
{NaN && <p>😸</p>}

// 0 - this will render 0 🤯 ❌
{0 && <p>😸</p>}

// negative 0 - this will render 0 🤯 ❌
{-0 && <p>😸</p>}

// string - this won't render anything ✅
{"" && <p>😸</p>}

As it turns out, not all falsy values give the expected result. It can be quite baffling! 🤯 This issue often arises when dealing with a Notification Badge.

You might think it's a minor problem, but guess what? Many developers simply forget to deal with it the right way!

Solutions

Luckily, I've got a handful of solutions for this issue.

1. Convert condition to Boolean

// NaN
{Boolean(NaN) && <p>😸</p>}

// 0
{Boolean(0) && <p>😸</p>}

// negative 0
{!!-0 && <p>😸</p>}

// string
{!!"" && <p>😸</p>}

// All of them won't render anything ✅

You can handle this by using the Boolean(expression) function or the double NOT operator !!expression. These methods will convert any data type into a boolean value. As seen in the results above, both true and false work perfectly fine in this case.

2. Use Ternary operator

// NaN
{NaN ? <p>😸</p> : null}

// 0
{0 ? <p>😸</p> : null}

// negative 0
{-0 ? <p>😸</p> : null}

// string
{"" ? <p>😸</p> : null}

// All of them won't render anything ✅

When the condition is falsy, you can use the ternary operator to return null instead.

Conclusion

So, we'll save ourselves from headaches and level up the quality of our code if we keep these things in mind. I hope this post has provided useful insights for your projects! ✨

Bonus

If you already have eslint-plugin-react installed, you can enable the following rule.

{
  // ...
  "react/jsx-no-leaked-render": ["error", { "validStrategies": ["coerce"] }]
  // ...
}

By doing so, ESLint will automatically replace all your Conditional Rendering codes to boolean.

// From this ❌
{NaN && <p>😸</p>}

// To this ✅
{!!NaN && <p>😸</p>}

Comments

[Andrew McCallum]

Love this. Too many times I have come across a leaked render. Definitely worth having a lint rule for

[Muhammad A Faishal]

Yeah, it does. You can increase your productivity by letting ESLint take care of this issue and focus on other things.

[Sriram]

Good one

[Ido Schacham]

Nice article, although the title is a bit of misleading

[KUSEH SIMON WEWOLIAMO]

Great

[Andika Kurniawan]

great post, I think adding Boolean(expression) or using ternary operator is solving anything