Add documentation for async computed vars (#1322)

* Add documentation for async computed vars

Co-Authored-By: Alek Petuskey <[email protected]>

* Fix CI failures by preventing async examples from executing during tests

Co-Authored-By: Alek Petuskey <[email protected]>

* Fix CI failures by using box parameter for async examples

Co-Authored-By: Alek Petuskey <[email protected]>

* Fix CI failures by using regular markdown code blocks for async examples

Co-Authored-By: Alek Petuskey <[email protected]>

* Add interactive demo examples for async computed vars

Co-Authored-By: Alek Petuskey <[email protected]>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Alek Petuskey <[email protected]>

Author: devin-ai-integration[bot]

docs/vars/computed_vars.md

@@ -1,6 +1,7 @@
 ```python exec
 import random
 import time
+import asyncio
 
 import reflex as rx
 ```
@@ -89,3 +90,96 @@ time the state is modified. `last_counter_a_update` is a computed var that only
 depends on `counter_a`, so it only gets recomputed when `counter_a` has changes.
 Similarly `last_counter_b_update` only depends on `counter_b`, and thus is
 updated only when `counter_b` changes.
+
+## Async Computed Vars
+
+Async computed vars allow you to use asynchronous operations in your computed vars.
+They are defined as async methods in your State class with the same `@rx.var` decorator.
+Async computed vars are useful for operations that require asynchronous processing, such as:
+
+- Fetching data from external APIs
+- Database operations
+- File I/O operations
+- Any other operations that benefit from async/await
+
+```python demo exec
+class AsyncVarState(rx.State):
+    count: int = 0
+    
+    @rx.var
+    async def delayed_count(self) -> int:
+        # Simulate an async operation like an API call
+        await asyncio.sleep(0.5)
+        return self.count * 2
+    
+    @rx.event
+    def increment(self):
+        self.count += 1
+
+
+def async_var_example():
+    return rx.vstack(
+        rx.heading("Async Computed Var Example"),
+        rx.text(f"Count: {AsyncVarState.count}"),
+        rx.text(f"Delayed count (x2): {AsyncVarState.delayed_count}"),
+        rx.button("Increment", on_click=AsyncVarState.increment),
+        spacing="4",
+    )
+```
+
+In this example, `delayed_count` is an async computed var that returns the count multiplied by 2 after a simulated delay.
+When the count changes, the async computed var is automatically recomputed.
+
+### Caching Async Computed Vars
+
+Just like regular computed vars, async computed vars can also be cached. This is especially
+useful for expensive async operations like API calls or database queries.
+
+```python demo exec
+class AsyncCachedVarState(rx.State):
+    user_id: int = 1
+    refresh_trigger: int = 0
+    
+    @rx.var(cache=True)
+    async def user_data(self) -> dict:
+        # In a real app, this would be an API call
+        await asyncio.sleep(1)  # Simulate network delay
+        
+        # Simulate different user data based on user_id
+        users = {
+            1: {"name": "Alice", "email": "[email protected]"},
+            2: {"name": "Bob", "email": "[email protected]"},
+            3: {"name": "Charlie", "email": "[email protected]"},
+        }
+        
+        return users.get(self.user_id, {"name": "Unknown", "email": "unknown"})
+    
+    @rx.event
+    def change_user(self):
+        # Cycle through users 1-3
+        self.user_id = (self.user_id % 3) + 1
+    
+    @rx.event
+    def force_refresh(self):
+        # This will not affect user_data dependencies, but will trigger a state update
+        self.refresh_trigger += 1
+
+
+def async_cached_var_example():
+    return rx.vstack(
+        rx.heading("Cached Async Computed Var Example"),
+        rx.text(f"User ID: {AsyncCachedVarState.user_id}"),
+        rx.text(f"User Name: {AsyncCachedVarState.user_data['name']}"),
+        rx.text(f"User Email: {AsyncCachedVarState.user_data['email']}"),
+        rx.hstack(
+            rx.button("Change User", on_click=AsyncCachedVarState.change_user),
+            rx.button("Force Refresh (No Effect)", on_click=AsyncCachedVarState.force_refresh),
+        ),
+        rx.text("Note: The cached async var only updates when user_id changes, not when refresh_trigger changes."),
+        spacing="4",
+    )
+```
+
+In this example, `user_data` is a cached async computed var that simulates fetching user data.
+It is only recomputed when `user_id` changes, not when other state variables like `refresh_trigger` change.
+This demonstrates how caching works with async computed vars to optimize performance for expensive operations.