fix(react): debounce onload events

[stephancill]

Change Summary

Fixes #135 by introducing a state variable which debounces the call to onload events

Merge Checklist

• PR has a changeset
• PR includes documentation if necessary
• PR updates the rich-embed examples if necessary
• includes a parallel PR for Mod-starter and the gateway if necessary

[changeset-bot]

🦋 Changeset detected

Latest commit: 4c8e600

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@mod-protocol/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
api	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 5, 2024 0:02am
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 5, 2024 0:02am
example-nextjs-shadcn	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 5, 2024 0:02am

[davidfurlong]

isn't the real issue here that this useEffect is being triggered again when it shouldn't? the only way for that to happen is if the events object is different - and it seems its different unnecessarily? perhaps we're not memoizing it before passing it to this component when we should?

[stephancill]

I wonder if it's coming from reconstructing the anonymous function here when mapCurrentTree is called

mod/packages/core/src/renderer.ts

Lines 1197 to 1203 in 3b751db

	events: {
	onLoad: () => {
	if (el.onload) {
	this.stepIntoOrTriggerAction(el.onload);
	}
	},
	},

[davidfurlong]

not sure - I think perhaps our core renderer doesn't follow react's component model with uniquely deduplicated components (keys) vs just remounting all the components. Could be worth passing a key or trying to debug whether thats what the cause is.

[stephancill]

did a bit of reading and useEffect compares reference types in the dependency array based on their location in memory. so what i think is happening is once the tree rerenders when the context changes, it creates a new anonymous function which will have a new location in memory and hence retriggers the useEffect hook

when i change the latch to a simple state variable that takes on the initial value of the events prop, it doesn't do the infinite looping anymore:

const [events] = React.useState(element.events);

React.useEffect(() => {
  events.onLoad();
}, [events]);

[davidfurlong]

a comment would be helpful. otherwise lgtm if events are immutable over the lifecycle of a component, which I think they are