Always check for null/undefined before accessing values or rendering UI instead of relying on non‑null assertions or unconditional usage. Prefer optional chaining and explicit guards in logic and conditional rendering in JSX. Why: Non-null assertions (`!`) and unconditional rendering can cause runtime exceptions when data is absent. Explicit checks make intent clear and avoid crashes. How to apply: - Replace `!` assertions with optional chaining and guards: - Bad: let relationId = only(edge.data.relations)!.id; - Good: let relationId = only(edge.data.relations)?.id; if (relationId) { /* use relationId */ } - Conditionally render components only when required data exists: - Bad: - Good: {view.customColorDefinitions && ( )} Notes: - Use optional chaining (?.) when a property may be undefined; follow with an if-check if you need to act on the value. - For JSX, prefer conditional rendering or early returns to avoid passing undefined props or rendering components that expect data. - Reserve `!` only when you can guarantee the value (and document why). When in doubt, guard.