ENG-10089: Support custom JS wrappers and bare functions in @rx.memo

[masenf]

Type of change

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

Description

Extends @rx.memo to support customizing the JavaScript wrapper applied to compiled component memos, or omitting the wrapper entirely to export bare function components.

Changes

Core feature:

• Added DEFAULT_MEMO_WRAPPER constant: React's memo function with its own import
• Extended @rx.memo decorator to accept optional wrapper= keyword argument:
  • @rx.memo or @rx.memo(): Uses React's memo (default behavior, unchanged)
  • @rx.memo(wrapper=custom_var): Wraps the function component in a custom JS helper (e.g., MobX observer)
  • @rx.memo(wrapper=None): Exports the bare function component with no wrapper
• The wrapper's imports ride on the Var itself, so custom wrappers bring their own imports and wrapper=None pulls in nothing
• wrapper= only applies to component-returning memos; var-returning memos reject the argument with a clear error

Compiler updates:

• Modified memo_components_template and memo_single_component_template to render the wrapper conditionally
• Updated _MEMO_BASE_IMPORTS to remove the hardcoded memo import (now supplied by DEFAULT_MEMO_WRAPPER)
• Extended compile_experimental_component_memo to extract and merge wrapper var data into the imports collection

Documentation:

• Added "Customizing the JavaScript Wrapper" section with examples
• Updated API reference to document the wrapper parameter

Tests

• Added 8 new unit tests covering:
  • Default wrapper behavior (test_default_memo_wrapper_is_react_memo, test_component_memo_default_wrapper)
  • Bare function export (test_component_memo_wrapper_none_emits_bare_function, test_component_memo_wrapper_none_in_unmirrored_module)
  • Custom wrappers (test_component_memo_custom_wrapper)
  • Error handling (test_var_returning_memo_rejects_wrapper)
  • Decorator syntax (test_memo_decorator_parens_form_matches_bare_decorator)
• Added integration test (test_memo_wrapper_none_renders_and_updates) verifying bare function components render and update correctly

Backward compatibility

Fully backward compatible. Existing @rx.memo decorators continue to work unchanged, using React's memo by default.

https://claude.ai/code/session_01CtJ4TyjTc7nDyDyFn446TH

[greptile-apps]

Greptile Summary

This PR adds configurable JavaScript wrappers for @rx.memo components. The main changes are:

• A default React memo wrapper carried by wrapper metadata.
• Support for custom wrapper vars and wrapper=None bare function components.
• Compiler and template updates for wrapper rendering and imports.
• Docs, unit tests, and integration coverage for the new wrapper modes.

Confidence Score: 5/5

This looks safe to merge.

• No blocking issues found in the changed code.

Important Files Changed

Filename	Overview
packages/reflex-base/src/reflex_base/components/memo.py	Adds the wrapper API, default wrapper sentinel, and component-only wrapper validation.
packages/reflex-base/src/reflex_base/compiler/templates.py	Renders memo component exports with an optional wrapper expression.
reflex/compiler/utils.py	Adds wrapper import collection and passes wrapper expressions into memo rendering.
reflex/compiler/compiler.py	Moves the React memo import out of shared base imports.
tests/units/components/test_memo.py	Adds coverage for default, custom, omitted, and rejected wrapper cases.
tests/integration/tests_playwright/test_memo.py	Adds browser coverage for a bare memo component rendering and updating.
docs/library/other/memo.md	Documents custom wrapper usage and the component-only restriction.

_{Reviews (3): Last reviewed commit: "Add changelog news fragments for memo wr..." | Re-trigger Greptile}

[codspeed-hq]

Merging this PR will not alter performance

✅ 26 untouched benchmarks
⏩ 8 skipped benchmarks¹

---

_{Comparing claude/rxmemo-wrapper-customization-hu30bw (947ca6c) with main (948c619)²}

Footnotes

1. 8 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

2. No successful run was found on main (3b97060) during the generation of this report, so 948c619 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 0bb48818b2

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[linear-code]

ENG-10089