DEV Community

Cover image for Avoid unsafe "&&" Operator for Conditional Rendering in React and Next.js
Muhammad A Faishal
Muhammad A Faishal

Posted on β€’ Edited on

34 4 6 4 4

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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> βœ…
Enter fullscreen mode Exit fullscreen mode

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>}
Enter fullscreen mode Exit fullscreen mode

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.

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 βœ…
Enter fullscreen mode Exit fullscreen mode

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 βœ…
Enter fullscreen mode Exit fullscreen mode

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"] }]
  // ...
}
Enter fullscreen mode Exit fullscreen mode

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

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

// To this βœ…
{!!NaN && <p>😸</p>}
Enter fullscreen mode Exit fullscreen mode

Top comments (6)

Collapse
 
stretch0 profile image
Andrew McCallum β€’

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

Collapse
 
maafaishal profile image
Muhammad A Faishal β€’

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

Collapse
 
konfydev profile image
Sriram β€’

Good one

Collapse
 
idosius profile image
Ido Schacham β€’

Nice article, although the title is a bit of misleading

Collapse
 
kodecapsule profile image
KUSEH SIMON WEWOLIAMO β€’

Great

Collapse
 
andikaflying profile image
Andika Kurniawan β€’

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

πŸ‘‹ Kindness is contagious

Value this insightful article and join the thriving DEV Community. Developers of every skill level are encouraged to contribute and expand our collective knowledge.

A simple β€œthank you” can uplift someone’s spirits. Leave your appreciation in the comments!

On DEV, exchanging expertise lightens our path and reinforces our bonds. Enjoyed the read? A quick note of thanks to the author means a lot.

Okay