Conditional rendering

Conditional UI can use `if` before return, ternary operators, logical `&&`, or early returns for loading and error branches. Pick the style that keeps the happy path readable. Nested ternaries often harm clarity — extract components or variables instead.

Model async work with explicit states: idle, loading, success, error. A small state machine is easier to test than scattered booleans. Never render `0` accidentally via `{count && <Badge />}` when zero is valid — use a boolean guard or comparison.

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• Separate loading, empty, error, and success UI.
• Avoid `&&` traps with numeric zero.
• Prefer named components over deep inline ternaries.