From 7dfb25591b385c8616f2915915b97f32b41a0e43 Mon Sep 17 00:00:00 2001
From: Lendemor <thomas.brandeho@gmail.com>
Date: Wed, 18 Dec 2024 14:01:56 +0100
Subject: [PATCH] update all render to use position

---
 reflex/.templates/jinja/web/pages/_app.js.jinja2      | 10 +++++++++-
 .../jinja/web/pages/custom_component.js.jinja2        | 11 ++++++++++-
 reflex/.templates/jinja/web/pages/index.js.jinja2     | 10 +++++++++-
 reflex/compiler/compiler.py                           |  4 ++--
 reflex/compiler/utils.py                              |  2 +-
 reflex/components/component.py                        |  2 +-
 6 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/reflex/.templates/jinja/web/pages/_app.js.jinja2 b/reflex/.templates/jinja/web/pages/_app.js.jinja2
index 21cfd921a..fcc9b2bc3 100644
--- a/reflex/.templates/jinja/web/pages/_app.js.jinja2
+++ b/reflex/.templates/jinja/web/pages/_app.js.jinja2
@@ -19,7 +19,15 @@ import * as {{library_alias}} from "{{library_path}}";
 {% block export %}
 function AppWrap({children}) {
 
-  {% for hook in hooks %}
+  {% for hook, data in hooks if data and data.position and data.position == const.hook_position.INTERNAL %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook, data in hooks if not data or (not data.position or data.position == const.hook_position.PRE_TRIGGER) %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook, data in hooks if data and data.position and data.position == const.hook_position.POST_TRIGGER %}
   {{ hook }}
   {% endfor %}
 
diff --git a/reflex/.templates/jinja/web/pages/custom_component.js.jinja2 b/reflex/.templates/jinja/web/pages/custom_component.js.jinja2
index 222524d2d..779584452 100644
--- a/reflex/.templates/jinja/web/pages/custom_component.js.jinja2
+++ b/reflex/.templates/jinja/web/pages/custom_component.js.jinja2
@@ -8,9 +8,18 @@
 {% endfor %}
 
 export const {{component.name}} = memo(({ {{-component.props|join(", ")-}} }) => {
-    {% for hook in component.hooks %}
+    {% for hook, data in component.hooks if data and data.position and data.position == const.hook_position.INTERNAL %}
     {{ hook }}
     {% endfor %}
+
+    {% for hook, data in component.hooks if not data or (not data.position or data.position == const.hook_position.PRE_TRIGGER) %}
+    {{ hook }}
+    {% endfor %}
+
+    {% for hook, data in component.hooks if data and data.position and data.position == const.hook_position.POST_TRIGGER %}
+    {{ hook }}
+    {% endfor %}
+
     return(
         {{utils.render(component.render)}}
       )
diff --git a/reflex/.templates/jinja/web/pages/index.js.jinja2 b/reflex/.templates/jinja/web/pages/index.js.jinja2
index efb086ef5..3eced6893 100644
--- a/reflex/.templates/jinja/web/pages/index.js.jinja2
+++ b/reflex/.templates/jinja/web/pages/index.js.jinja2
@@ -8,7 +8,15 @@
 
 {% block export %}
 export default function Component() {
-  {% for hook in hooks %}
+  {% for hook, data in hooks.items() if data and data.position and data.position == const.hook_position.INTERNAL %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook, data in hooks.items() if not data or (not data.position or data.position == const.hook_position.PRE_TRIGGER) %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook, data in hooks.items() if data and data.position and data.position == const.hook_position.POST_TRIGGER %}
   {{ hook }}
   {% endfor %}
 
diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py
index 9f81f319d..218dd0c55 100644
--- a/reflex/compiler/compiler.py
+++ b/reflex/compiler/compiler.py
@@ -75,7 +75,7 @@ def _compile_app(app_root: Component) -> str:
     return templates.APP_ROOT.render(
         imports=utils.compile_imports(app_root._get_all_imports()),
         custom_codes=app_root._get_all_custom_code(),
-        hooks={**app_root._get_all_hooks_internal(), **app_root._get_all_hooks()},
+        hooks=app_root._get_all_hooks(),
         window_libraries=window_libraries,
         render=app_root.render(),
     )
@@ -149,7 +149,7 @@ def _compile_page(
         imports=imports,
         dynamic_imports=component._get_all_dynamic_imports(),
         custom_codes=component._get_all_custom_code(),
-        hooks={**component._get_all_hooks_internal(), **component._get_all_hooks()},
+        hooks=component._get_all_hooks(),
         render=component.render(),
         **kwargs,
     )
diff --git a/reflex/compiler/utils.py b/reflex/compiler/utils.py
index 1d698431c..aee603d10 100644
--- a/reflex/compiler/utils.py
+++ b/reflex/compiler/utils.py
@@ -290,7 +290,7 @@ def compile_custom_component(
             "name": component.tag,
             "props": props,
             "render": render.render(),
-            "hooks": {**render._get_all_hooks_internal(), **render._get_all_hooks()},
+            "hooks": {**render._get_all_hooks()},
             "custom_code": render._get_all_custom_code(),
         },
         imports,
diff --git a/reflex/components/component.py b/reflex/components/component.py
index f261ae4d3..38fd3dc3b 100644
--- a/reflex/components/component.py
+++ b/reflex/components/component.py
@@ -1595,7 +1595,7 @@ class Component(BaseComponent, ABC):
         code = {}
 
         # Add the internal hooks for this component.
-        code.update(self._get_all_hooks_internal())
+        code.update(self._get_hooks_internal())
 
         # Add the hook code for this component.
         hooks = self._get_hooks()