---
title: "Compute values instead of storing them · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/client-and-server-state/derived-values
updated: 2026-10-20
licence: "All rights reserved"
---

# Compute values instead of storing them

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state)
- Rule: Compute totals, counts, filtered lists and labels from the source data when you render. Never keep them in their own state to update by hand.
- How: Keep one source, such as the list of cart lines, and compute the total from it in a function. Memoise only when a profiler shows the computation is slow. A stored copy goes stale the first time someone forgets to update it.
- Check: A search of components and stores for state named `total`, `count` or `filtered`, such as `setTotal(` or `state.itemCount =`, finds no matches.

Example:

```ts
export function cartSummary(lines: CartLine[]) {
  const totalMinor = lines.reduce((sum, line) => sum + line.unitPriceMinor * line.quantity, 0);
  return { totalMinor, itemCount: lines.reduce((sum, line) => sum + line.quantity, 0) };
}
```

```python
def cart_summary(lines: list[CartLine]) -> dict:
    return {
        "total_minor": sum(line.unit_price_minor * line.quantity for line in lines),
        "item_count": sum(line.quantity for line in lines),
    }
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/client-and-server-state/derived-values`.

- Previous: [Keep screen state in the address](https://agentwranglers.se/playbook/app-ui/client-and-server-state/state-in-url)
- [Client and server state](https://agentwranglers.se/playbook/app-ui/client-and-server-state)