Understand “&&” Conditional Rendering in React with Coding Experiments

This is my memo of how conditional rendering with the && operator behaves in React, along with some coding experiments I carried out to determine when to use it and when not to.

    // an example of Conditional Rendering with &&
    {condition && <p>Hello World!</p>}

Understand Logical AND (&&) behaviour

Conditional rendering with the && operator makes use of JavaScript's logical AND behaviour, so it is essential to understand this operator if you want to fully understand that expression.

The following is an explanation from from the MDN docs.

The logical AND (&&) (logical conjunction) operator for a set of boolean operands will be true if and only if all the operands are true. Otherwise it will be false.

    true && true // true
    true && false // false
    false && true // false
    false && false // false

However, we can use the && operator with different types of values, which can be useful but can also be tricky to work with.

More generally, the operator returns the value of the first falsy operand encountered when evaluating from left to right, or the value of the last operand if they are all truthy.

Here are some examples.

    // reurun first falsy operand
    0 && "Hello" // 0
    false && "Hello" // false

    1 && false // false
    1 && "Hello" && 0 // 0

    // return the last operand if they are all truthy
    1 && "Hello" // Hello
    true && "Hello" // Hello

Understand “&&” Conditional Rendering in React

There is another factor that is important to understand when it comes to Conditional Rendering: Booleans, Null, and Undefined are ignored in React.

false, null, undefined, and true are valid children. They simply don’t render. These JSX expressions will all render to the same thing:

    <div />

    <div></div>

    <div>{false}</div>

    <div>{null}</div>

    <div>{undefined}</div>

    <div>{true}</div>

    ref: https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored

By combining these factors, we can use conditional rendering with boolean values.

    <div>
    {false && <p>this doesn't render</p>} //false
    </div>

In this example, the && operator follows the logical AND rule, so the result inside of {} is false. This means that <div></div> will be rendered in accordance with the React specification. Logically, the same thing happens when using undefined or null.

The actual problem occurs when using other falsy values like 0 and NaN. In these cases, the && operator will return 0 or NaN respectively, and the element will be rendered in the DOM, which can lead to unexpected results.

    // how we write
    <div>
    {0 && <p>this doesn't render</p>}
    </div>

    // What we see
    <div>0</div>

    /* the same happens with NaN*/
    // how we write
    <div>
    {NaN && <p>this doesn't render</p>}
    </div>

    // What we see
    <div>NaN</div>

Conclusion

It is better to always use boolean values before the && operator for conditional rendering as the official React documentation recommends. However, it is also important to be aware of some of the falsy values that can cause unexpected results when used with the && operator.

Thank you for reading :)

whole code is available here (JavaScript, TypeScript)

the original article is here