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

View post

Great post! I agree to all your suggestions excluding the second one. I find the ternary operator less readable than conditional rendering. Character ":" is difficult to notice between multiple lines. Why do you think that the ternary operator is the better option ?

João Santos • Feb 24 '21

I agree. I've been refactoring several React components lately, and ternary operators (in my opinion) make the code noisy.

While two separate conditionals may indicate these pieces are not related, I think it's easier to read and understand.

mr chedda • May 1 '21

Writing two separate conditionals for conditionally rendering two components, is inefficient not to mention rudimentary programming. Ternary syntax is much more concise and expected from a dev working in a production application IMHO. Imagine a switch statement writing the same n case statements for 1 result instead of using fall through. It may be more “readable” in terms of leisure reading but not pragmatic programming in any way.

Tyler Hawkins • Feb 23 '21

Thanks! Good question.

To me, the ternary helps show that these two pieces of UI are related. When true, you render X, and when false, you render Y.

    <div>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionOneText ? (
        <p>The condition must be true!</p>
      ) : (
        <p>The condition must be false!</p>
      )}
    </div>

By splitting these out into two separate conditionals using the && operator, it obfuscates the fact that the two pieces of UI are related and that they are opposites of each other.

    <div>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionOneText && <p>The condition must be true!</p>}
      {!showConditionOneText && <p>The condition must be false!</p>}
    </div>