Computed vars have values derived from other properties on the backend. They are defined as methods in your State class with the @rx.var decorator. A computed var is recomputed every time an event is processed in your app.

Try typing in the input box and clicking out.

Here, upper_text is a computed var that always holds the upper case version of text.

We recommend always using type annotations for computed vars.

A cached var, decorated as @rx.var(cache=True) is a special type of computed var that is only recomputed when the other state vars it depends on change. This is useful for expensive computations, but in some cases it may not update when you expect it to. Previous versions of Reflex had a @rx.cached_var decorator, which is now replaced by the new cache argument of @rx.var.

In this example last_touch_time is a normal computed var, which updates any 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.