DEV Community

loading...

Discussion on: Status instead of isLoading boolean?

larsejaas profile image
LarsEjaas

I think you are actually right!! 😮 I always thought this was only a check for null.

Thread Thread
pclundaahl profile image
Patrick Charles-Lundaahl

Ah okay! I wasn't sure if I'd missed something or not. I use guard clauses pretty extensively in my React code, but I also use quite a few languages across a bunch of projects. Wasn't sure if I'd gotten mixed up 😅

Thread Thread
sleeplessbyte profile image
Derk-Jan Karrenbeld

You did miss something.

The && will cast the left-hand operation to a boolean already.

This is not true when it short-circuits. That is, when the left hand side is falsy.

Won't null and undefined already be converted to false for the purpose of the guard clause?

No, they won't

loading = undefined

loading && true
//=> undefined

loading = null

loading && true
//=> null
Enter fullscreen mode Exit fullscreen mode

In the end, undefined will cause errors, null won't. false depends on the renderer.

Side note! If you want to be explicit, using Boolean(loading) is probably more readable than double negation (!!loading).

The best way is to not rely on && (or ||) to return the right result, but use a ternary:

loading ? ... : null
Enter fullscreen mode Exit fullscreen mode

Why? Now you don't need to think about all falsy values and the rendering never breaks :D

Thread Thread
larsejaas profile image
LarsEjaas

Nice writeup! I actually use the ternary a lot, but I do not find it useful for all purposes. I am a bit unsure!? So you are actually saying that the "!!" prefix would be needed here to "catch" all falsey values?

Thread Thread
sleeplessbyte profile image
Derk-Jan Karrenbeld

!!value is effectively the same as Boolean(value) and will therefore always return false in the case of all falsy values.

!!value && <MyComponent />
Enter fullscreen mode Exit fullscreen mode

Will always resolve to false if the left hand side is falsy. False values are not rendered, so yes, that would catch all falsey values.

I still recommend Boolean(value) && <MyComponent /> over !!value && <MyComponent /> because it is both explicit and easier to read, albeit it a bit longer. It's easy to skip over !!, but more importantly, it's easy to forget to add !!. If you're used to seeing Boolean(...), that's less likely.

Thread Thread
larsejaas profile image
LarsEjaas

That's actually a great point! I haven't used Boolean(..) in my code I think 🤔 But I like how it's more descriptive! Thanks for taking the time to responde 😊👍

Thread Thread
sleeplessbyte profile image
Derk-Jan Karrenbeld

The _callable Global Objects are a gem ✨.

I also recommend Number(value) over the obscure +value, which both are usually better to "type-cast" than parseInt or parseFloat, as it will properly fail when the value isn't representing a number, instead of doing something unexpected.

Thread Thread
larsejaas profile image
LarsEjaas

Ahh, cool. I haven't digged super deeply into the differences, I just really like "Number" because "it does what it says on the tin" 😆 I really like easy readable code 😊

Forem Open with the Forem app