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 = (props: { element: Extract, { 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 = (props: { element: Extract, { 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();