Why does React render 0 with conditional `&&`?

I love using conditional statements in React. But sometimes they don't quite work how you expect them to, like when you get a 0 but you expected nothing.

So why does React render 0?

Because React renders what you tell it to render!

I didn’t understand this at first either, but I finally figured it out. And once you understand why (and when) React renders 0, you’ll never fall into this trap again*!

*Ok, ok you probably will - but you will know how to quickly fix it!

false && <MyComponent />
true && <MyComponent />

What do you expect to happen with these two conditionals in React?

Seriously, think about it.

If you are like me, you would think something like... "I expect the first conditional to render nothing, and the second one to render <MyComponent />".

Did you come up with a similar answer?

If yes, then commiserations - we are both wrong(ish). We're wrong about the first conditional.

It's not rendering nothing. It's rendering false.

And that's an important difference.

How the conditional works

If the left side of the conditional (left of the &&) is a truthy value, then the right side is returned (in React this is usually a component or a string).

If the left side of the conditional is a falsy value, the left side is returned instead.

So with our fictional example:

false && <MyComponent />

false is a falsy value, so false is returned (and that's not nothing!).

With that fresh in our minds, let's find out why what is returned from our conditional && is important.

Why does React render 0?

React renders 0 when you tell it to render 0.

Remember that if the left side of the conditional is a falsy value, the left side is returned instead.

false && <MyComponent /> // returns false
0 && <MyComponent /> // returns 0

Both false and 0 are falsy values, so they are returned instead of the component. But the difference is how React treats these falsy values.

If false is returned from our conditional (like in the first line), React doesn't render anything. Blank. Nill. Nadda. Which is usually what we want.

But if 0 is returned from our conditional (like in the second line), React renders 0 on the screen. Which is usually NOT what we want.

Why is this?

Because 0 might be a falsy value, but it's a number, not a boolean - and React doesn't render booleans, but it does render numbers (even 0!).

I can't think of an occasion where I would want the boolean false to be rendered. But if React didn't render 0, there would be some pretty big issues.

Let's imagine you have built a snazzy email app, and want to show a user a count of emails in their inbox.

<div><b>Emails:</b> {count}</div>

Some users aim for inbox zero, so some users (not me!) will regularly have 0 for the count of emails in their inbox. But if count === 0 and React doesn't render the number 0, how could you display it?

I guess you would have to turn it into a string.

<div><b>Emails:</b> {count.toString()}</div>

Or something else?

<div><b>Emails:</b> {count || "Zero!"}</div>

It would be a bit annoying to have to work around that all the time though.

So to recap, a conditional && will return the left side if it is a falsy value (like false, null, or 0). But while returning false or null will give you an empty node (and nothing will render), 0 will render.

How can we fix that?

How to fix React rendering 0

Finally, the moment you have been waiting for! You might have figured out how to fix this issue already, but if you haven't you at least now know why 0 is rendered.

So how do we fix it?

The fix is usually as quick and easy as putting !! in front of the condition to transform 0 into false.

Here are some common examples of when 0 is rendered in React (and how to fix them):

// ❌ returns 0
let myArray = [];
return (
  myArray.length && <MyComponent />
);

// ✅ returns false
let myArray = [];
return (
  !!myArray.length && <MyComponent />
);

// ❌ returns 0
let count = 0;
return (
  count && <MyComponent />
);

// ✅ returns false
let count = 0;
return (
  !!count && <MyComponent />
);

// ❌ returns 0
let myString = "";
return (
  myString.length && <MyComponent />
);

// ✅ returns false
let myString = "";
return (
  !!myString.length && <MyComponent />
);

Tada! I hope your days of seeing 0 instead of nothing in React are over.

If you are using conditional && statements to render important components your users need to see, here's how to scroll to an element after render in React.