DEV Community

Discussion on: React Clean Code - Simple ways to write better and cleaner code

clivend profile image
clivend • Edited on

"Use the && operator instead." not sure about this. see

karladler profile image
Karl Adler

also very bad idea for react native, which crashes if you don't return null

drarig29 profile image
Corentin Girard

I don't like the shortcut where you just evaluate the truthiness of myArray.length to know if an array is empty or not...

drarig29 profile image
Corentin Girard

The operator && is not the problem here. In the example of the article you linked, he's using Array.length as the left operand of the operator. But obviously the 0 is falsy and you return 0, so a zero is shown.

You could just do myArray.length > 0 && <yourJsx>. Which is more readable.

Always pay attention when you are using the truthiness of an Integer alone.

It's just the same as if you wanted to conditionaly do something related to a score for example :

const score: number | undefined = 0;

if (score) {
  // do something with the score "because it's defined"
Enter fullscreen mode Exit fullscreen mode

This code is incorrect and should check score !== undefined instead.

thawkin3 profile image
Tyler Hawkins Author

Agreed! Kent points this out in his article too that his downfall was using contacts.length in his code rather than contacts.length > 0 or !!contacts.length or Boolean(contacts.length), not necessarily the usage of the && operator.

Thread Thread
clivend profile image

agree, but I think it is not worth to have think every time how and why you use one pattern or the other. I prefer to reduce the amount of things I need to keep in mind (given they are already countless) and stick with one pattern that works for all

Thread Thread
drarig29 profile image
Corentin Girard • Edited on

Yeah but all the gotchas the article is speaking about are misuses of the operator &&. If you really know the operator and just don't throw it everywhere without thinking one second (which you should always do, like in any language, especially in JavaScript), then you'll never have any problem.

Plus this shortcut is really readable. Most of the time, you don't ask yourself if it works.

For the length thing, I think you should basically never use the shortcut where you simply test its truthiness to know if the array is empty or not.

And for the error about returning undefined with { error } as a function argument, you just have to know that object destructuring can return undefined.

Anyway, do what you want, but I always use it without any issue.

Thread Thread
adamashored profile image

If you really know the operator and just don't throw it everywhere without thinking one second

React's entire development philosophy (at least how it appears to me) is to craft an API that prevents developers from shooting themselves in the foot. Sidebar: Google could learn a thing or two from them.

Best practices are best practices for all levels of developers, not just the experts.

dimaportenko profile image
Dima Portenko

I agree. As Kent C. Dodds said it's abuse of usage && rather than clean code. Also this article provides 0 arguments and just direct you this is good and this is bad.

Some day usage of && in render function will lead you to Probably you'll not be who wrote it but you have to fix it.