From a4e3f0560104fadf75f76ee4bcef0a720f5022b8 Mon Sep 17 00:00:00 2001
From: Masen Furer <m_github@0x26.net>
Date: Fri, 26 Jul 2024 17:10:08 -0700
Subject: [PATCH] [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
---
 reflex/vars.py | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/reflex/vars.py b/reflex/vars.py
index f857cf03e..911915534 100644
--- a/reflex/vars.py
+++ b/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,
     )