The memo decorator is used to optimize component rendering by memoizing components that don't need to be re-rendered. This is particularly useful for expensive components that depend on specific props and don't need to be re-rendered when other state changes in your application.
When using rx.memo, you must follow these requirements:
- Type all arguments: All arguments to a memoized component must have type annotations.
- Use keyword arguments: When calling a memoized component, you must use keyword arguments (not positional arguments).
When you wrap a component function with @rx.memo, the component will only re-render when its props change. This helps improve performance by preventing unnecessary re-renders.
In this example, the expensive_component will only re-render when the label prop changes, not when the count state changes.
You can also use rx.memo with components that have event handlers:
When used with state variables, memoized components will only re-render when the specific state variables they depend on change:
You can also pass arguments to event handlers in memoized components:
Use rx.memo for:
- Components with expensive rendering logic
- Components that render the same result given the same props
- Components that re-render too often due to parent component updates
Avoid using rx.memo for:
- Simple components where the memoization overhead might exceed the performance gain
- Components that almost always receive different props on re-render