clarify rx.var cache defaults to True

[ruhz3]

Changes

• Clarified that cache=True is the default behavior for @rx.var
• Fixed example code where last_touch_time was not working as expected
  • Changed from @rx.var to @rx.var(cache=False) to recompute on every state update
• Updated documentation to explicitly explain:
  • Default caching behavior
  • When to use cache=False
  • Deprecated @rx.cached_var usage

Issue

The previous documentation and example at line 56 didn't work correctly because:

• last_touch_time used @rx.var without specifying cache=False
• This resulted in cached behavior by default, not updating on every state change as intended

[greptile-apps]

Greptile Overview

Greptile Summary

This PR fixes a critical documentation issue in the computed vars guide. The primary problem was that the last_touch_time example was broken - it used @rx.var decorator without specifying caching behavior, which defaults to cache=True. This meant the timestamp wouldn't update on every state change as the documentation claimed it would.

The changes clarify that @rx.var defaults to caching enabled (cache=True) and only recomputes when dependencies change. To create a computed var that recomputes on every state update, you must explicitly use @rx.var(cache=False). The PR also adds comprehensive documentation for async computed vars, showing practical patterns for handling async operations within the Reflex framework.

This fix ensures the documentation accurately reflects the framework's behavior and provides working examples that developers can rely on.

Important Files Changed

Filename	Score	Overview
docs/vars/computed_vars.md	5/5	Fixed broken example code and clarified default caching behavior for @rx.var decorator

Confidence score: 5/5

• This PR is safe to merge with minimal risk as it only fixes documentation issues without changing any code behavior
• Score reflects that this is purely a documentation fix that corrects misleading information and broken examples, making it extremely unlikely to cause any production issues
• No files require special attention as the single changed file contains only documentation improvements

Sequence Diagram

sequenceDiagram
    participant User
    participant Frontend
    participant "State Management"
    participant "Computed Var Cache"

    User->>Frontend: "Types in input box"
    Frontend->>Frontend: "Input value changes"
    User->>Frontend: "Clicks out (blur event)"
    Frontend->>"State Management": "set_text(value)"
    "State Management"->>"State Management": "self.text = value"
    "State Management"->>"Computed Var Cache": "Check if upper_text cache invalid"
    "Computed Var Cache"->>"State Management": "Cache invalid (text changed)"
    "State Management"->>"State Management": "Recompute upper_text()"
    "State Management"->>"State Management": "return self.text.upper()"
    "State Management"->>"Computed Var Cache": "Update cached result"
    "State Management"->>Frontend: "State update with new upper_text"
    Frontend->>User: "Display updated uppercase text"

    Note over User, "Computed Var Cache": Default cache=True behavior

    User->>Frontend: "Clicks Increment A button"
    Frontend->>"State Management": "increment_a()"
    "State Management"->>"State Management": "self.counter_a += 1"
    "State Management"->>"Computed Var Cache": "Check last_touch_time (cache=False)"
    "Computed Var Cache"->>"State Management": "Always recompute (no cache)"
    "State Management"->>"State Management": "Get current time"
    "State Management"->>"Computed Var Cache": "Check last_counter_a_update dependencies"
    "Computed Var Cache"->>"State Management": "counter_a changed, recompute"
    "State Management"->>"State Management": "Generate timestamp with counter_a"
    "State Management"->>Frontend: "State update with new values"
    Frontend->>User: "Display updated counters and timestamps"

    Note over User, "Computed Var Cache": Cached vs non-cached var behavior

    User->>Frontend: "Clicks Change User button"
    Frontend->>"State Management": "change_user()"
    "State Management"->>"State Management": "self.user_id = (self.user_id % 3) + 1"
    "State Management"->>"Computed Var Cache": "Check async user_data dependencies"
    "Computed Var Cache"->>"State Management": "user_id changed, recompute async var"
    "State Management"->>"State Management": "await asyncio.sleep(1)"
    "State Management"->>"State Management": "Fetch user data based on user_id"
    "State Management"->>"Computed Var Cache": "Cache async result"
    "State Management"->>Frontend: "State update with new user_data"
    Frontend->>User: "Display updated user information"

Loading

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[ruhz3]

reflex-dev/reflex#5968
Only one of the two PRs should be merged.

[ruhz3]

Examples that do not work can cause misunderstandings about the feature, so they must be corrected.