Pierre-Henry™A small React behaviour that still catches engineers off guard.
If you write:
items.length && <List />
React may render 0 instead of nothing.
↓↓ Why? ↓↓
0 is falsy in JavaScript, but && returns the value itself.
React can render numbers, so 0 appears in the UI.
Safer patterns:
!!items.length && <List />
or
items.length > 0 && <List />
Tiny detail. Real UI bugs!
TL;DR: Never rely on raw values like .length in JSX conditionals. Always convert them to a boolean first.
To prevent the React && rendering bugs before they ship, add a lint rule and let CI enforce it.
Such as below ⬇️
// eslint.config.js
rules: {
'react/jsx-no-leaked-render': ['error', {
validStrategies: ['coerce', 'ternary']
}]
}
Push → Lint → Block unsafe JSX → Merge.
Convert values to booleans in JSX conditionals, and let your pipeline enforce it automatically.
