From b6e25ff6e965c1d406c2769262b789ca262677ec Mon Sep 17 00:00:00 2001
From: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>
Date: Thu, 24 Apr 2025 23:34:12 -0700
Subject: [PATCH 1/3] allow memo components to be passed to props

---
 reflex/components/component.py | 22 +++++++++++++++++++++-
 reflex/vars/base.py            |  7 +++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index 0ecef7ab0bd..fcd9103b1f0 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -19,6 +19,7 @@
 from rich.markup import escape
 
 import reflex.state
+from reflex import constants
 from reflex.base import Base
 from reflex.compiler.templates import STATEFUL_COMPONENT
 from reflex.components.core.breakpoints import Breakpoints
@@ -1928,6 +1929,7 @@ def _register_custom_component(
     if dummy_component.tag is None:
         raise TypeError(f"Could not determine the tag name for {component_fn!r}")
     CUSTOM_COMPONENTS[dummy_component.tag] = dummy_component
+    return dummy_component
 
 
 def custom_component(
@@ -1951,7 +1953,25 @@ 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)
+    object.__setattr__(
+        wrapper,
+        "_as_var",
+        lambda: Var(
+            f"jsx({dummy_component.tag})",
+            _var_type=Component,
+            _var_data=VarData(
+                imports={
+                    f"$/{constants.Dirs.UTILS}/components": [
+                        ImportVar(tag=dummy_component.tag)
+                    ],
+                    "@emotion/react": [
+                        ImportVar(tag="jsx"),
+                    ],
+                }
+            ),
+        ),
+    )
 
     return wrapper
 
diff --git a/reflex/vars/base.py b/reflex/vars/base.py
index bc1dd5a7daf..58866600ca2 100644
--- a/reflex/vars/base.py
+++ b/reflex/vars/base.py
@@ -1549,6 +1549,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
 

From 497ea54790922e42b1b95bf5bb7b10dbccfe557b Mon Sep 17 00:00:00 2001
From: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>
Date: Thu, 24 Apr 2025 23:38:52 -0700
Subject: [PATCH 2/3] dang it darglint

---
 reflex/components/component.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index fcd9103b1f0..54437203e80 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -1906,6 +1906,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.
     """

From 80ca1ac1a08ed29383a46b960768085c33b94f30 Mon Sep 17 00:00:00 2001
From: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>
Date: Tue, 26 Aug 2025 13:52:18 -0700
Subject: [PATCH 3/3] type component

---
 reflex/components/component.py | 34 ++++++++++++++++------------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/reflex/components/component.py b/reflex/components/component.py
index e378182af69..64445193db4 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -22,7 +22,6 @@
 
 import reflex.state
 from reflex import constants
-from reflex import constants
 from reflex.compiler.templates import stateful_component_template
 from reflex.components.core.breakpoints import Breakpoints
 from reflex.components.dynamic import load_dynamic_serializer
@@ -2243,24 +2242,23 @@ def wrapper(*children, **props) -> CustomComponent:
 
     # Register this component so it can be compiled.
     dummy_component = _register_custom_component(component_fn)
-    object.__setattr__(
-        wrapper,
-        "_as_var",
-        lambda: Var(
-            f"jsx({dummy_component.tag})",
-            _var_type=Component,
-            _var_data=VarData(
-                imports={
-                    f"$/{constants.Dirs.UTILS}/components": [
-                        ImportVar(tag=dummy_component.tag)
-                    ],
-                    "@emotion/react": [
-                        ImportVar(tag="jsx"),
-                    ],
-                }
+    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