use macros for rendering

reflex/.templates/jinja/web/pages/_app.js.jinja2

@@ -1,4 +1,5 @@
 {% extends "web/pages/base_page.js.jinja2" %}
+{% from "web/pages/macros.js.jinja2" import renderHooks %}
 
 {% block early_imports %}
 import '$/styles/styles.css'
@@ -18,18 +19,7 @@ import * as {{library_alias}} from "{{library_path}}";
 
 {% block export %}
 function AppWrap({children}) {
-
+  {{ renderHooks(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 %}
 
   return (
     {{utils.render(render, indent_width=0)}}

reflex/.templates/jinja/web/pages/custom_component.js.jinja2

@@ -1,5 +1,5 @@
 {% extends "web/pages/base_page.js.jinja2" %}
-
+{% from "web/pages/macros.js.jinja2" import renderHooks %}
 {% block export %}
 {% for component in components %}
 
@@ -8,17 +8,7 @@
 {% endfor %}
 
 export const {{component.name}} = memo(({ {{-component.props|join(", ")-}} }) => {
-    {% for hook, data in component.hooks if data and data.position and data.position == const.hook_position.INTERNAL %}
+    {{ renderHooks(component.hooks.items()) }}
-    {{ 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)}}

reflex/.templates/jinja/web/pages/macros.js.jinja2

@@ -0,0 +1,54 @@
+{% macro sortHooks(hooks) %}
+    {% set internal_hooks = [] %}
+    {% set pre_trigger_hooks = [] %}
+    {% set post_trigger_hooks = [] %}
+
+    {% for hook, data in hooks %}
+        {% if data and data.position and data.position == const.hook_position.INTERNAL %}
+            {% set internal_hooks = internal_hooks + [hook] %}
+        {% elif data and data.position and data.position == const.hook_position.POST_TRIGGER %}
+            {% set post_trigger_hooks = post_trigger_hooks+ [hook] %}
+        {% else %}
+            {% set pre_trigger_hooks = pre_trigger_hooks + [hook] %}
+        {% endif %}
+    {% endfor %}
+{% endmacro %}
+
+{% macro renderHooks(hooks) %}
+  {{ sortHooks(hooks) }}
+
+  {# Render the grouped hooks #}
+  {% for hook in internal_hooks %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook in pre_trigger_hooks %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook in post_trigger_hooks %}
+  {{ hook }}
+  {% endfor %}
+{% endmacro %}
+
+{% macro renderHooksWithMemo(hooks, memo)%}
+  {{ sortHooks(hooks) }}
+  
+  {# Render the grouped hooks #}
+  {% for hook in internal_hooks %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook in pre_trigger_hooks %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook in memo %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook in post_trigger_hooks %}
+  {{ hook }}
+  {% endfor %}
+
+{% endmacro %}

reflex/.templates/jinja/web/pages/stateful_component.js.jinja2

@@ -1,23 +1,9 @@
 {% import 'web/pages/utils.js.jinja2' as utils %}
-
+{% from 'web/pages/macros.js.jinja2' import renderHooksWithMemo %}
 {% set all_hooks = component._get_all_hooks().items() %}
 
 export function {{tag_name}} () {
-  {% for hook, data in all_hooks if data and data.position and data.position == const.hook_position.INTERNAL %}
+  {{ renderHooksWithMemo(all_hooks, memo_trigger_hooks) }}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook, data in all_hooks if not data or (not data.position or data.position == const.hook_position.PRE_TRIGGER) %}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook in memo_trigger_hooks %}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook, data in all_hooks if data and data.position and data.position == const.hook_position.POST_TRIGGER %}
-  {{ hook }}
-  {% endfor %}
   
   return (
     {{utils.render(component.render(), indent_width=0)}}