Notes Engineering

Prefer ternary over && for conditional rendering

Engineering

condition && <Thing /> looks fine until condition is 0 and React renders the literal zero on screen. Or until it’s an empty string, or NaN, or until you and a teammate forget that the falsy branch returns the value itself.

condition ? <Thing /> : null is two extra characters and removes the entire category of bug.

I lint for it now. It also reads better: ternary states intent (“show or don’t show”), && states a side effect that happens to be JSX.