add rx memo marker to memo fields (#5709)

* add rx memo marker to memo fields

* unnecessary MEMO_MARKER for event key

Author: adhami3310

reflex/components/component.py

@@ -37,7 +37,7 @@
     PageNames,
 )
 from reflex.constants.compiler import SpecialAttributes
-from reflex.constants.state import FRONTEND_EVENT_STATE
+from reflex.constants.state import FRONTEND_EVENT_STATE, MEMO_MARKER
 from reflex.event import (
     EventCallback,
     EventChain,
@@ -2005,7 +2005,7 @@ def get_args_spec(key: str) -> types.ArgsSpec | Sequence[types.ArgsSpec]:
 
         super()._post_init(
             event_triggers={
-                key: EventChain.create(
+                key + MEMO_MARKER: EventChain.create(
                     value=props[key],
                     args_spec=get_args_spec(key),
                     key=key,
@@ -2016,7 +2016,9 @@ def get_args_spec(key: str) -> types.ArgsSpec | Sequence[types.ArgsSpec]:
         )
 
         to_camel_cased_props = {
-            format.to_camel_case(key) for key in props if key not in event_types
+            format.to_camel_case(key + MEMO_MARKER)
+            for key in props
+            if key not in event_types
         }
         self.get_props = lambda: to_camel_cased_props  # pyright: ignore [reportIncompatibleVariableOverride]
 
@@ -2031,7 +2033,7 @@ def get_args_spec(key: str) -> types.ArgsSpec | Sequence[types.ArgsSpec]:
             if key not in props_types:
                 continue
 
-            camel_cased_key = format.to_camel_case(key)
+            camel_cased_key = format.to_camel_case(key + MEMO_MARKER)
 
             # Get the type based on the annotation.
             type_ = props_types[key]

reflex/constants/state.py

@@ -15,3 +15,4 @@ class StateManagerMode(str, Enum):
 FRONTEND_EVENT_STATE = "__reflex_internal_frontend_event_state"
 
 FIELD_MARKER = "_rx_state_"
+MEMO_MARKER = "_rx_memo_"

tests/units/components/markdown/test_markdown.py

@@ -169,7 +169,7 @@ def test_create_map_fn_var_subclass(cls, fn_body, fn_args, explicit_return, expe
         (
             "code",
             {"codeblock": syntax_highlighter_memoized_component(CodeBlock)},
-            r"""(({node, inline, className, children, ...props}) => { const match = (className || '').match(/language-(?<lang>.*)/); let _language = match ? match[1] : '';  ;             return inline ? (                 jsx(RadixThemesCode,{...props},children,)             ) : (                 jsx(CodeBlock,{code:((Array.isArray(children)) ? children.join("\n") : children),language:_language,...props},)             );         })""",
+            r"""(({node, inline, className, children, ...props}) => { const match = (className || '').match(/language-(?<lang>.*)/); let _language = match ? match[1] : '';  ;             return inline ? (                 jsx(RadixThemesCode,{...props},children,)             ) : (                 jsx(CodeBlock,{codeRxMemo:((Array.isArray(children)) ? children.join("\n") : children),languageRxMemo:_language,...props},)             );         })""",
         ),
         (
             "code",
@@ -178,7 +178,7 @@ def test_create_map_fn_var_subclass(cls, fn_body, fn_args, explicit_return, expe
                     ShikiHighLevelCodeBlock
                 )
             },
-            r"""(({node, inline, className, children, ...props}) => { const match = (className || '').match(/language-(?<lang>.*)/); let _language = match ? match[1] : '';  ;             return inline ? (                 jsx(RadixThemesCode,{...props},children,)             ) : (                 jsx(CodeBlock,{code:((Array.isArray(children)) ? children.join("\n") : children),language:_language,...props},)             );         })""",
+            r"""(({node, inline, className, children, ...props}) => { const match = (className || '').match(/language-(?<lang>.*)/); let _language = match ? match[1] : '';  ;             return inline ? (                 jsx(RadixThemesCode,{...props},children,)             ) : (                 jsx(CodeBlock,{codeRxMemo:((Array.isArray(children)) ? children.join("\n") : children),languageRxMemo:_language,...props},)             );         })""",
         ),
     ],
 )

tests/units/components/test_component.py

@@ -850,7 +850,7 @@ def test_create_custom_component(my_component):
     """
     component = rx.memo(my_component)(prop1="test", prop2=1)
     assert component.tag == "MyComponent"
-    assert component.get_props() == {"prop1", "prop2"}
+    assert component.get_props() == {"prop1RxMemo", "prop2RxMemo"}
     assert component.tag in CUSTOM_COMPONENTS