DEV Community

loading...

Discussion on: The 10 Component Commandments

Collapse
dance2die profile image
Sung M. Kim

Thank you @selbekk for the thorough "10 component commandments".

What are some of your favorite tips for creating cool components?

I am not sure if this is a tip or a bad practice, but I've started seeing a lot of code with following structure in "return/render" methods.

{isError && <ErrorMessage error={error}}
{isLoading && <Loading />}
{!isLoading && (
  <OtherComponentRequringData data={data} />
)}

Would such a way of showing components a bad practice?
I found it more declarative then having "if/else" (or using a ternary operator).

But the downside I found is that, many people aren't familiar with how to interpret the "state && component".

What would you think?

Collapse
ambroseus profile image
Eugene Samonenko

also found useful this pattern as more declarative, but need to use it carefully. my early pitfall was to use array.length && ... instead of array.length === 0 && ...

Collapse
andrii2019 profile image
andrii2019

What about just using
!!array.length && ...?
It looks smarter and shortly.

Thread Thread
ambroseus profile image
Eugene Samonenko

yep, it's shorter :) use !! many years while coding on perl. now I prefer Boolean(array.length)

Collapse
andrii2019 profile image
andrii2019

What about just using !!array.length && ... ? It looks smarter and short.

Collapse
thewix profile image
TheWix

This is great advice. Falsey and Thruthy values bit me in the same way. I do things like isEmpty(array) or if I am really defensive isNullOrEmpty(array)

Collapse
edwincarbajal profile image
Edwin Carbajal

I had the same question 🤔

Collapse
seanmclem profile image
Seanmclem

Does eslint still flag it?

Collapse
ianesparrago profile image
Ian Esparrago

It's the short-circuit operator. I think it's neat.

background-color: ${p =>
      (p.attendanceStatus === "in" && p.theme.color.primary.main) ||
      (p.attendanceStatus === "out" && p.theme.color.out) ||
      (p.attendanceStatus === "later" && p.theme.color.warning) ||
      (p.attendanceStatus === "late" && p.theme.color.error) ||
      (p.attendanceStatus === "absent" && p.theme.color.absent) ||
      (p.attendanceStatus === "off" && p.theme.color.grey.medium)};