Browse Source

[REF-3375] useMemo on generateUUID props to maintain consistent value (#3708)

When using rx.vars.get_uuid_string_var, wrap the prop Var in `useMemo` so that
the value remains consistent across re-renders of the component.

Fix #3707
Masen Furer 9 months ago
parent
commit
a4e3f05601
1 changed files with 12 additions and 4 deletions
  1. 12 4
      reflex/vars.py

+ 12 - 4
reflex/vars.py

@@ -2552,17 +2552,25 @@ class CallableVar(BaseVar):
 
 
 def get_uuid_string_var() -> Var:
-    """Return a var that generates UUIDs via .web/utils/state.js.
+    """Return a Var that generates a single memoized UUID via .web/utils/state.js.
+
+    useMemo with an empty dependency array ensures that the generated UUID is
+    consistent across re-renders of the component.
 
     Returns:
-        the var to generate UUIDs at runtime.
+        A Var that generates a UUID at runtime.
     """
     from reflex.utils.imports import ImportVar
 
     unique_uuid_var_data = VarData(
-        imports={f"/{constants.Dirs.STATE_PATH}": {ImportVar(tag="generateUUID")}}  # type: ignore
+        imports={
+            f"/{constants.Dirs.STATE_PATH}": {ImportVar(tag="generateUUID")},  # type: ignore
+            "react": "useMemo",
+        }
     )
 
     return BaseVar(
-        _var_name="generateUUID()", _var_type=str, _var_data=unique_uuid_var_data
+        _var_name="useMemo(generateUUID, [])",
+        _var_type=str,
+        _var_data=unique_uuid_var_data,
     )