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

[Lê Quang Huy]

Thanks for writing this article. In my opinion, clean code also means it's easier to upgrade it to be the more complex code, it'll be clean when you have your reasons ( and be sure other maintainers know your reasons via docs).

1 & 2 Conditional rendering

in order to avoid weird crash on some Android devices (assuming that we all try React Native someday), this is what I use all the time

<>
 {Boolean(showConditionalText) && <ConditionalTextComponent />}
</>

This will prevent someone to assign a text variable to showConditionalText, it's fine on the web because we can render text as direct child.

4 String props

if you use curly braces, it'll be more convenient to convert it to variable later, and you will convert alot

// from
<Greeting personName={"John"} />
// to
<Greeting personName={userInfo.name} />

It's more like Class Component vs Functional Component in the past, everyone wants to write a functional component in the beginning, but ends up converting it to class component.

8

Just want to share another way to deal with states, it does not relate much to your example. It's when you have dozen of useState variables, and the docs recommend useCallback, so the function always have most updated values. If keeping track of when to use useCallback or normal function, keeping track of the values cost you too much time, you can use a mutable variable and you can access anytime without useCallback

const [entityAData, setEntityAData] = useState(initialValueA);
const [entityBData, setEntityBData] = useState(initialValueB);

const entityADataRef = useRef(initialValueA);
const entityBDataRef = useRef(initialValueB);

useEffect(() => {
  entityADataRef.current = entityAData;
}, [entityAData]);
useEffect(() => {
  entityBDataRef.current = entityBData;
}, [entityBData]);

// entityADataRef.current and entityBDataRef.current will always be updated. free to use it as ready only variable, without callback

// we can write a custom hook to keep it short and avoid repeating code

[mr chedda]

Boolean(value) === !!value. The latter is just more concise

[Lê Quang Huy]

True. But the article was saying about showConditionText, not !!showConditionText. Without the way to force the variable to be boolean, it will cause problem if the variable somehow is assigned to text or object.

And Boolean() is more convenient when doing a complex comparison (more than one)

[mr chedda]

I’m not sure you understand. I’m commenting on your comment. You suggested to use Boolean(showConditionText) instead of the raw variable: showConditionText. I’m only pointing out that !!showConditionText is a more concise syntax of Boolean(showConditionText). Pre-pending any variable with !! Is implicitly coercing it to a Boolean. Further more Boolean() only takes one argument so I’m not sure how it handles more “complex” comparisons?

[Lê Quang Huy]

Complex means more than one variable. Often goes with && or ||

For example Boolean(a && b && c). In order to write !!(a && b && c), if you start with !!a you need to add “(” before a and add b c after a and I dont like that. I just want to put the cursor inside the “()” and write new variables.

If you understand my comment, you’ll know I talk about the possibility of expanding the code from simple to be more complex logic.

[mr chedda]

That's not what your suggestion was but in that case it would simply be

( (!!a && !!b && !!c) || !!d ) && <Component />

Your suggestion above would result in

( (Boolean(a) && Boolean(b) && Boolean(c)) || Boolean(d) ) && <Component />

which is not efficient nor concise

[Lê Quang Huy]

@mr chedda
The first one is too many !!
The second one, is funny, because I literally gave my example above. How could you see my example and come up with that?
If you mean “result in” is how the computer sees it, all of your examples, my examples and Ryan’s examples, are the same to the computer.
And if you mean “result in” is the way that I actually write it. I will write it again and hope you can get it

Boolean((a && b && c) || d) &&

[mr chedda]

Lê.... Maybe it's because English is NOT your first language but the two statements I wrote are programmatically equivalent but your syntax is written in a more beginner way.

You likely WILL NOT see this in a production code base written by senior developers.

( Boolean(a) && Boolean(b) && Boolean(c)) || Boolean(d) ) && <Component />

You likely WILL see this syntax in a production code base written by senior developers:

( ( !!a && !!b && !!c ) || !!d ) && <Component />

I don't know how I can make it any clearer.... the two statements are saying THE EXACT SAME THING... the difference is your suggestion using Boolean() would likely be written by a beginner programmer.

[Lê Quang Huy]

So your comment is about:

1. You wrote an example with multiple “Boolean()” and assume I came up with that, when in two of my examples, multiple variables inside just one “Boolean()”

2. repeated what I said about “the exact same thing”, yes the computer would understand them the same way, we’re talking about Coding style, the convenient of upgrading the code to more complex logic.

3. Didnt have any reply to my “too many !!”. Made an execuse the seniors are using it, production code.. bla bla

4. Personal attack about English not my native language, beginner level

Keep it up, you’re doing real great. Dont worry too much, I’ve been through many years of js development, your comments and your capital letters wont make me a beginner.