Memo

The @rx.memo decorator turns a function into a memoized React component. The compiler emits the function as its own module, and React's memo only re-renders it when its declared props change. Reach for it when a subtree is expensive to render and depends on a narrow slice of state.

Every parameter must be annotated with rx.Var[...] or rx.RestProp. The compiler reads those annotations to generate prop names, prop forwarding, and the JS function signature.

1. rx.Var[T] for props — annotate each prop as rx.Var[T] where T is the prop's runtime type (str, int, a TypedDict, etc.). Inside the function body, the parameter is a Var you compose into the rendered tree.
2. rx.RestProp for spread props — at most one parameter may be annotated as rx.RestProp, which forwards unrecognized kwargs through to the rendered root.
3. rx.Var[rx.Component] for slot children — a parameter named children annotated as rx.Var[rx.Component] accepts children rendered by the caller.
4. Keyword arguments at the call site — pass props by name, not by position.

Defaults need to be rx.Var values. For the common empty cases use the module-level constants rx.EMPTY_VAR_STR (an empty string), rx.EMPTY_VAR_INT (zero), and rx.EMPTY_VAR_COMPONENT (an empty component): class_name: rx.Var[str] = rx.EMPTY_VAR_STR falls back to "" when the caller omits the prop, and children: rx.Var[rx.Component] = rx.EMPTY_VAR_COMPONENT makes a slot optional.

expensive_component re-renders only when label changes — bumping DemoState.count does not invalidate it.

Props can be ordinary Vars. The memoized component re-renders when those Vars change:

Use rx.RestProp to accept and forward arbitrary props (think ...rest in JSX). Useful for thin wrappers that re-style a primitive without redeclaring every prop.

At most one rx.RestProp parameter is allowed per memo.

The rest parameter should be treated as an opaque value and passed positionally to any component which will use it.

You may use the .merge var operation to combine the arbitrary props with another object Var or python dict. The memo body can read placeholders like rest.get("class_name", ""), but the actual value will be unavailable at compile time, so you can't branch on it or do python operations with the values, only var operations which will be translated to Javascript expressions.

The same example as above, but now allowing the caller to optionally pass a class_name that gets merged with the default styles:

Declare a parameter named children typed as rx.Var[rx.Component] to receive a child subtree.

A memo function can return rx.Var[T] instead of rx.Component. The compiler emits a plain JavaScript function and the call site is just a Var you can compose into the page.

The body of a Var-returning memo runs at compile time and is restricted to Var operations — no hooks, no Python branching on the Vars.

Reach for rx.memo when:

• The component is expensive to render.
• Its output is a stable function of a small set of props.
• A frequently-updating ancestor would otherwise force it to re-render.

Skip it when:

• The component is cheap and the bookkeeping is not worth it.
• The props change on every render anyway — memo never gets to short-circuit.

The previous rx.memo accepted plain-typed arguments (def card(title: str)). The new one requires rx.Var[...]. To migrate:

The old rx._x.memo alias still resolves to the new memo and prints a one-time was promoted to rx.memo notice.

Wraps a function whose parameters are all rx.Var[...] or rx.RestProp. Returns a callable that constructs the memoized component (or a Var if the function's return annotation is rx.Var[T]).