Best Practices for Conditional Rendering in React JSX

Many template frameworks (e.g., Vue, Angular) provide built‑in conditional directives like ng‑if or v‑if , but React's JSX does not have such directives, offering more flexibility that can also cause problems; this article presents several recommendations to avoid those issues.

Beware of 0

When rendering a list, developers often write {data.length && {data.map(d => d)} } . If data is an empty array, the expression renders 0 in the UI because JavaScript’s logical && returns the left‑hand operand when it is falsy.

To prevent this, always ensure the left side is a boolean value, for example:

{data.length > 0 &&
{data.map(d => d)}
}

or use double‑bang or Boolean :

{!!data.length &&
{data.map(d => d)}
}
{Boolean(data.length) &&
{data.map(d => d)}
}

You can also use a ternary operator:

{data.length ?
{data.map(d => d)}
: null}

Pay Attention to Operator Precedence

The && operator has higher precedence than || . Therefore, an expression like data.a || data.b && is interpreted as data.a || (data.b && ) . When using both operators, wrap the || part in parentheses:

(data.a || data.b) &&

Ternary Operator Nesting Hell

While ternary operators are handy for switching between two JSX fragments, nesting more than two branches quickly becomes unreadable. For example:

{isEmoji
    ?
: isCoupon
        ?
: isLoaded &&
}

Refactor such logic using if / else statements or separate functions:

const getButton = () => {
    if (isEmoji) return
;
    if (isCoupon) return
;
    return isLoaded ?
: null;
};

Don’t Use JSX as a Condition

Using props.children directly in a condition is unsafe because it can be an empty array, a single element, or a fragment. Instead, rely on utilities like React.Children.count or React.Children.toArray to determine existence.

const Wrap = (props) => {
    if (!props.children) return null;
    return
{props.children}
;
};

Because props.children may be an empty array ( {[].map(e => )} ) or a single element ( { } ), simple length checks are insufficient.

Remount or Update?

Using separate JSX branches such as {hasItem ? : } does not cause a full remount; React updates the existing Item component’s props. However, when the branches render different component types, React will remount because the element types differ.

To force a remount when the same component should be treated as a new instance, provide a unique key :

{mode === 'name'
    ?
:
}

Alternatively, replace complex ternaries with logical && expressions for clarity.

Summary

{number && } will render 0 ; use {number > 0 && } instead.

Always wrap || conditions in parentheses when combined with && : {(cond1 || cond2) && } .

Avoid ternary operators with more than two branches; refactor to if / else logic.

Do not use props.children directly for conditional rendering.

Using {condition ? : } does not remount the Tag component; use a unique key or separate && branches if a remount is required.

Reference: https://thoughtspile.github.io/2022/01/17/jsx-conditionals/