allow memo components to be passed to props

reflex/components/component.py

@@ -2190,6 +2190,9 @@ def _register_custom_component(
     Args:
         component_fn: The function that creates the component.
 
+    Returns:
+        The custom component.
+
     Raises:
         TypeError: If the tag name cannot be determined.
     """
@@ -2214,6 +2217,7 @@ def _register_custom_component(
         msg = f"Could not determine the tag name for {component_fn!r}"
         raise TypeError(msg)
     CUSTOM_COMPONENTS[dummy_component.tag] = dummy_component
+    return dummy_component
 
 
 def custom_component(
@@ -2237,7 +2241,24 @@ def wrapper(*children, **props) -> CustomComponent:
         )
 
     # Register this component so it can be compiled.
-    _register_custom_component(component_fn)
+    dummy_component = _register_custom_component(component_fn)
+    if tag := dummy_component.tag:
+        object.__setattr__(
+            wrapper,
+            "_as_var",
+            lambda: Var(
+                tag,
+                _var_type=type[Component],
+                _var_data=VarData(
+                    imports={
+                        f"$/{constants.Dirs.UTILS}/components": [ImportVar(tag=tag)],
+                        "@emotion/react": [
+                            ImportVar(tag="jsx"),
+                        ],
+                    }
+                ),
+            ),
+        )
 
     return wrapper
 

reflex/vars/base.py

@@ -1476,6 +1476,13 @@ def _create_literal_var(
             if isinstance(value, var_subclass.python_types):
                 return literal_subclass.create(value, _var_data=_var_data)
 
+        if (
+            (as_var_method := getattr(value, "_as_var", None)) is not None
+            and callable(as_var_method)
+            and isinstance((resulting_var := as_var_method()), Var)
+        ):
+            return resulting_var
+
         from reflex.event import EventHandler
         from reflex.utils.format import get_event_handler_parts