ah we need to call var_name

Author: adhami3310

reflex/compiler/templates.py

@@ -373,7 +373,10 @@ def context_template(
     """
     initial_state = initial_state or {}
     state_contexts_str = "".join(
-        [f"{state_name}: createContext(null)," for state_name in initial_state]
+        [
+            f"{format_state_name(state_name)}: createContext(null),"
+            for state_name in initial_state
+        ]
     )
 
     state_str = (
@@ -424,17 +427,18 @@ def context_template(
     )
 
     state_reducer_str = "\n".join(
-        rf'const [{state_name}, dispatch_{state_name}] = useReducer(applyDelta, initialState["{state_name}"])'
+        rf'const [{format_state_name(state_name)}, dispatch_{format_state_name(state_name)}] = useReducer(applyDelta, initialState["{state_name}"])'
         for state_name in initial_state
     )
 
     create_state_contexts_str = "\n".join(
-        rf"createElement(StateContexts.{state_name},{{value: {state_name}}},"
+        rf"createElement(StateContexts.{format_state_name(state_name)},{{value: {format_state_name(state_name)}}},"
         for state_name in initial_state
     )
 
     dispatchers_str = "\n".join(
-        f'"{state_name}": dispatch_{state_name},' for state_name in initial_state
+        f'"{state_name}": dispatch_{format_state_name(state_name)},'
+        for state_name in initial_state
     )
 
     return rf"""import {{ createContext, useContext, useMemo, useReducer, useState, createElement, useEffect }} from "react"
@@ -443,7 +447,7 @@ def context_template(
 
 export const initialState = {"{}" if initial_state else json_dumps(initial_state)}
 
-export const defaultColorMode = { default_color_mode }
+export const defaultColorMode = {default_color_mode}
 export const ColorModeContext = createContext(null);
 export const UploadFilesContext = createContext(null);
 export const DispatchContext = createContext(null);
@@ -830,16 +834,5 @@ def render(self, **kwargs) -> str:
 # Code to render StatefulComponent to an external file to be shared
 STATEFUL_COMPONENTS = TemplateFunction(_stateful_components_template)
 
-# Sitemap config file.
-SITEMAP_CONFIG = "module.exports = {config}".format
-
 # Code to render the root stylesheet.
 STYLE = TemplateFunction(_styles_template)
-
-# Template containing some macros used in the web pages.
-MACROS = TemplateFunction(
-    lambda **kwargs: _render_hooks(
-        kwargs.get("hooks", {}),
-        kwargs.get("memo", None),
-    )
-)

reflex/components/markdown/markdown.py

@@ -422,12 +422,12 @@ def _get_component_map_name(self) -> str:
 
     def _get_custom_code(self) -> str | None:
         hooks = {}
-        from reflex.compiler.templates import MACROS
+        from reflex.compiler.templates import _render_hooks
 
         for _component in self.component_map.values():
             comp = _component(_MOCK_ARG)
             hooks.update(comp._get_all_hooks())
-        formatted_hooks = MACROS.module.renderHooks(hooks)  # pyright: ignore [reportAttributeAccessIssue]
+        formatted_hooks = _render_hooks(hooks)
         return f"""
         function {self._get_component_map_name()} () {{
             {formatted_hooks}