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: <LikeC4CustomColors customColors={view.customColorDefinitions} />
- Good: {view.customColorDefinitions && (
<LikeC4CustomColors customColors={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.