From 4c8e6005b35ea99d713385a48ae28638c34449c4 Mon Sep 17 00:00:00 2001
From: Stephan Cilliers <5469870+stephancill@users.noreply.github.com>
Date: Sat, 23 Dec 2023 16:36:27 +0200
Subject: [PATCH] fix(react): debounce onload events

---
 .changeset/violet-chairs-clap.md |  5 +++++
 packages/core/src/renderer.ts    |  2 ++
 packages/react/src/index.tsx     | 12 ++++++++++--
 3 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/violet-chairs-clap.md

diff --git a/.changeset/violet-chairs-clap.md b/.changeset/violet-chairs-clap.md
new file mode 100644
index 00000000..b1b7ba2f
--- /dev/null
+++ b/.changeset/violet-chairs-clap.md
@@ -0,0 +1,5 @@
+---
+"@mod-protocol/react": patch
+---
+
+fix: debounce onload event calling to prevent infinite calling (#135)
diff --git a/packages/core/src/renderer.ts b/packages/core/src/renderer.ts
index 743decbd..62551011 100644
--- a/packages/core/src/renderer.ts
+++ b/packages/core/src/renderer.ts
@@ -630,6 +630,7 @@ export class Renderer {
 
                 if (action.ref) {
                   set(this.refs, action.ref, { response, progress: 100 });
+                  this.onTreeChange();
                 }
 
                 if (action.onsuccess) {
@@ -651,6 +652,7 @@ export class Renderer {
 
                 if (action.ref) {
                   set(this.refs, action.ref, { error });
+                  this.onTreeChange();
                 }
 
                 this.asyncAction = null;
diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx
index c4437d10..dea17123 100644
--- a/packages/react/src/index.tsx
+++ b/packages/react/src/index.tsx
@@ -175,7 +175,12 @@ const WrappedHorizontalLayoutRenderer = <T extends React.ReactNode>(props: {
   element: Extract<ModElementRef<T>, { type: "horizontal-layout" }>;
 }) => {
   const { component: Component, element } = props;
-  const { events, type, elements, ...rest } = element;
+  const { type, elements, ...rest } = element;
+
+  // Prevents the onLoad event from being called multiple times when
+  // the tree changes and reference to the events object changes.
+  // Assumes events are immutable over the lifecycle of a component
+  const [events] = React.useState(element.events);
 
   React.useEffect(() => {
     events.onLoad();
@@ -189,7 +194,10 @@ const WrappedVerticalLayoutRenderer = <T extends React.ReactNode>(props: {
   element: Extract<ModElementRef<T>, { type: "vertical-layout" }>;
 }) => {
   const { component: Component, element } = props;
-  const { events, type, elements, ...rest } = element;
+  const { type, elements, ...rest } = element;
+
+  // See WrappedHorizontalLayoutRenderer for explanation
+  const [events] = React.useState(element.events);
 
   React.useEffect(() => {
     events.onLoad();