Conditional Rendering

What this is. Three ways to show something only sometimes, each suited to a different shape of decision.

Ternary when there are two outcomes.

Logical AND when it is something or nothing.

Early return when a whole branch of the component is different.

The third is the one people reach for least and usually the clearest.

✦ The zero trap

{items.length && <List />} renders a literal 0 when the array is empty, because 0 is falsy but is still something React will happily print. Compare explicitly: {items.length > 0 && <List />}. This catches almost everyone once.