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 && <div>{data.map(d => d)}</div>}. 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 && <div>{data.map(d => d)}</div>}

or use double‑bang or Boolean:

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

You can also use a ternary operator:

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

Pay Attention to Operator Precedence

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

(data.a || data.b) && <div className="error"/>

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
    ? <EmojiButton />
    : isCoupon
        ? <CouponButton />
        : isLoaded && <ShareButton />}

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

const getButton = () => {
    if (isEmoji) return <EmojiButton />;
    if (isCoupon) return <CouponButton />;
    return isLoaded ? <ShareButton /> : 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 <div>{props.children}</div>;
};

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

Remount or Update?

Using separate JSX branches such as {hasItem ? <Item id={1} /> : <Item id={2} />} 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'
    ? <input placeholder="name" key="name" />
    : <input placeholder="phone" key="phone" />}

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

Summary

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

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

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

Do not use props.children directly for conditional rendering.

Using {condition ? <Tag props1 /> : <Tag props2 />} 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/