diff --git a/reflex/components/component.py b/reflex/components/component.py index 032de595071..b6bbd28c1e9 100644 --- a/reflex/components/component.py +++ b/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] diff --git a/reflex/constants/state.py b/reflex/constants/state.py index 51c22384649..7212e1eb819 100644 --- a/reflex/constants/state.py +++ b/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_" diff --git a/tests/units/components/markdown/test_markdown.py b/tests/units/components/markdown/test_markdown.py index 1bbf3b083c9..36a06f3995e 100644 --- a/tests/units/components/markdown/test_markdown.py +++ b/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-(?.*)/); 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-(?.*)/); 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-(?.*)/); 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-(?.*)/); let _language = match ? match[1] : ''; ; return inline ? ( jsx(RadixThemesCode,{...props},children,) ) : ( jsx(CodeBlock,{codeRxMemo:((Array.isArray(children)) ? children.join("\n") : children),languageRxMemo:_language,...props},) ); })""", ), ], ) diff --git a/tests/units/components/test_component.py b/tests/units/components/test_component.py index 0e0b5a7214e..0802e45da4b 100644 --- a/tests/units/components/test_component.py +++ b/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