Document canonical place to initialise state-maintaining child components. Was: infinite loop when component calls this.page.update() #311

wunter8 commented 2026年02月25日 05:40:24 +01:00

I found a bug when I was working on a project in Kitten.

If a kitten.Component on a kitten.Page calls this.page.update(), it starts an infinite loop.

AI helped me track down the exact issue, proposed a fix, and created the minimal example in the attached file.

Let me know if you have any questions or want me to provide additional information.

I found a bug when I was working on a project in Kitten. If a kitten.Component on a kitten.Page calls `this.page.update()`, it starts an infinite loop. AI helped me track down the exact issue, proposed a fix, and created the minimal example in the attached file. Let me know if you have any questions or want me to provide additional information.

wunter8 commented 2026年02月25日 05:42:26 +01:00

Here are the main files in the tarball:

index.page.js

import kitten from '@small-web/kitten'
import Child from './Child.component.js'
export default class IndexPage extends kitten.Page {
 html() {
 // Before the fix, this count grows every time 'update' is called
 // because children are never cleared.
 console.log('Total children in Page:', this.children.length)
 if (this.children.length > 500) {
 return
 }
 return kitten.html`
 <main>
 <h1>Kitten Loop Reproduction</h1>
 <${Child.connectedTo(this)} />
 </main>
 `
 }
}

Child.component.js

import kitten from '@small-web/kitten'
export default class Child extends kitten.Component {
 html() {
 return kitten.html`
 <div id="${this.id}">
 <p>Child ID: ${this.id}</p>
 <button name="triggerLoop" connect>Trigger Loop</button>
 </div>
 `
 }
 onTriggerLoop() {
 console.log('Handler triggered on child:', this.id)
 // 1. This triggers a page update.
 // 2. Page.update() calls Page.html().
 // 3. Page.html() calls Child.connectedTo(this), adding a NEW child to the array.
 // 4. Because bubbleEvent iterates the live array, it eventually hits the new child.
 // 5. The new child runs onTriggerLoop(), starting the cycle again.
 this.page.update()
 }
}

fix-infinite-loop.patch

diff --git a/src/lib/KittenComponent.js b/src/lib/KittenComponent.js
index 0ff29fe9..15ea1cea 100644
--- a/src/lib/KittenComponent.js
+++ b/src/lib/KittenComponent.js
@@ -327,6 +327,7 @@ class ${this.constructor.name} extends kitten.Page {
 for (const child of this.children) {
 child.bubbleEvent('_onDisconnect')
 }
+ this.children = []
 this.page.send(await globalThis.kitten.html`<${this.component} />`)
 }
 
@@ -366,7 +367,11 @@ class ${this.constructor.name} extends kitten.Page {
 }
 }
 // Bubble event to child nodes.
- for (const child of this.children) {
+ // We iterate over a copy of the children array because handlers might
+ // trigger updates that result in new children being added to the
+ // component hierarchy, which would lead to an infinite loop.
+ const children = [...this.children]
+ for (const child of children) {
 child.bubbleEvent(eventHandlerName, data, event, target)
 }
 }

Here are the main files in the tarball: index.page.js ``` import kitten from '@small-web/kitten' import Child from './Child.component.js' export default class IndexPage extends kitten.Page { html() { // Before the fix, this count grows every time 'update' is called // because children are never cleared. console.log('Total children in Page:', this.children.length) if (this.children.length > 500) { return } return kitten.html` <main> <h1>Kitten Loop Reproduction</h1> <${Child.connectedTo(this)} /> </main> ` } } ``` Child.component.js ``` import kitten from '@small-web/kitten' export default class Child extends kitten.Component { html() { return kitten.html` <div id="${this.id}"> <p>Child ID: ${this.id}</p> <button name="triggerLoop" connect>Trigger Loop</button> </div> ` } onTriggerLoop() { console.log('Handler triggered on child:', this.id) // 1. This triggers a page update. // 2. Page.update() calls Page.html(). // 3. Page.html() calls Child.connectedTo(this), adding a NEW child to the array. // 4. Because bubbleEvent iterates the live array, it eventually hits the new child. // 5. The new child runs onTriggerLoop(), starting the cycle again. this.page.update() } } ``` fix-infinite-loop.patch ``` diff --git a/src/lib/KittenComponent.js b/src/lib/KittenComponent.js index 0ff29fe9..15ea1cea 100644 --- a/src/lib/KittenComponent.js +++ b/src/lib/KittenComponent.js @@ -327,6 +327,7 @@ class ${this.constructor.name} extends kitten.Page { for (const child of this.children) { child.bubbleEvent('_onDisconnect') } + this.children = [] this.page.send(await globalThis.kitten.html`<${this.component} />`) } @@ -366,7 +367,11 @@ class ${this.constructor.name} extends kitten.Page { } } // Bubble event to child nodes. - for (const child of this.children) { + // We iterate over a copy of the children array because handlers might + // trigger updates that result in new children being added to the + // component hierarchy, which would lead to an infinite loop. + const children = [...this.children] + for (const child of children) { child.bubbleEvent(eventHandlerName, data, event, target) } } ```

aral commented 2026年03月02日 12:49:29 +01:00

Hey @wunter8, I think Kitten is actually working as designed here but the correct way of using child components in class-based components hasn’t really been documented.

To fix your example, create the child component conditionally, based on whether it exists or not:

import kitten from '@small-web/kitten'
import Child from './Child.component.js'
export default class IndexPage extends kitten.Page {
 html() {
 this.Child ??= Child.connectedTo(this)
 // Before the fix, this count grows every time 'update' is called
 // because children are never cleared.
 console.log('Total children in Page:', this.children.length)
 if (this.children.length > 500) {
 return
 }
 return kitten.html`
 <main>
 <h1>Kitten Loop Reproduction</h1>
 <${this.Child} />
 </main>
 `
 }
}

If you’re ok with it too, I’ll modify this issue to be a documentation issue. (The class-based workflow really isn’t documented properly and I’m still discovering how best to use it myself.) :)

Hey @wunter8, I think Kitten is actually working as designed here but the correct way of using child components in class-based components hasn’t really been documented. To fix your example, create the child component conditionally, based on whether it exists or not: ```js import kitten from '@small-web/kitten' import Child from './Child.component.js' export default class IndexPage extends kitten.Page { html() { this.Child ??= Child.connectedTo(this) // Before the fix, this count grows every time 'update' is called // because children are never cleared. console.log('Total children in Page:', this.children.length) if (this.children.length > 500) { return } return kitten.html` <main> <h1>Kitten Loop Reproduction</h1> <${this.Child} /> </main> ` } } ``` If you’re ok with it too, I’ll modify this issue to be a documentation issue. (The class-based workflow really isn’t documented properly and I’m still discovering how best to use it myself.) :)

wunter8 commented 2026年03月02日 17:39:20 +01:00

Oh, interesting! I haven't seen that pattern used anywhere (I've been looking at your other repos (like the Gaza Verified site) for examples), but I'll go update my code to do it like this instead.

Typescript is complaining that Property 'Child' does not exist on type 'IndexPage', but I can //@ts-ignore that.

I saw somewhere that class-based components cause extra performance overhead and should be used sparingly. Is that still the case? Because at the same time it seems like they are the new, "preferred" way of using Kitten.

In any case, changing this to a documentation issue is totally fine. Thanks for pointing me in the right direction!

Oh, interesting! I haven't seen that pattern used anywhere (I've been looking at your other repos (like the Gaza Verified site) for examples), but I'll go update my code to do it like this instead. Typescript is complaining that `Property 'Child' does not exist on type 'IndexPage'`, but I can //@ts-ignore that. I saw somewhere that class-based components cause extra performance overhead and should be used sparingly. Is that still the case? Because at the same time it seems like they are the new, "preferred" way of using Kitten. In any case, changing this to a documentation issue is totally fine. Thanks for pointing me in the right direction!

aral commented 2026年03月02日 19:10:31 +01:00

Oh, interesting! I haven't seen that pattern used anywhere (I've been looking at your other repos (like the Gaza Verified site) for examples), but I'll go update my code to do it like this instead.

Well, there’s a good reason for that... I only just realised that’s how we should be doing it ;)

(I started doing something similar recently using the onChange() handler to initialise child components in components themselves but that doesn’t fit the lifecycle of a page. So I think doing it here should be the canonical way.)

Typescript is complaining that Property 'Child' does not exist on type 'IndexPage', but I can //@ts-ignore that.

It’s a bit convoluted but you can type it as:

export default class IndexPage extends kitten.Page {
 /** @type {ReturnType<typeof kitten.Component['connectedTo']>} */
 Child
 ...
}

I also just opened an issue to export a friendlier type from @small-web/kitten: kitten/globals#12

In the meanwhile, you can, of course, use a typedef. e.g.,

import kitten from '@small-web/kitten'
import Child from './Child.component.js'
/** @typedef {ReturnType<typeof kitten.Component['connectedTo']>} ConnectedChild */
export default class IndexPage extends kitten.Page {
 /** @type {ConnectedChild} */
 Child
 ...
}

I saw somewhere that class-based components cause extra performance overhead and should be used sparingly. Is that still the case? Because at the same time it seems like they are the new, "preferred" way of using Kitten.

I’d say use it unless you expect lots of components on a page. e.g., don’t use it if you’re recreating the Draw Together example with all those pixels.

I’m going with not prematurely optimising as it is so much nicer to author with.

In any case, changing this to a documentation issue is totally fine. Thanks for pointing me in the right direction!

Perfect, will do that now :)

And thanks so much for raising the issue 💕

> Oh, interesting! I haven't seen that pattern used anywhere (I've been looking at your other repos (like the Gaza Verified site) for examples), but I'll go update my code to do it like this instead. Well, there’s a good reason for that... I only just realised that’s how we should be doing it ;) (I started doing something similar recently using the `onChange()` handler to initialise child components in components themselves but that doesn’t fit the lifecycle of a page. So I think doing it here should be the canonical way.) > > Typescript is complaining that `Property 'Child' does not exist on type 'IndexPage'`, but I can //@ts-ignore that. It’s a bit convoluted but you can type it as: ```js export default class IndexPage extends kitten.Page { /** @type {ReturnType<typeof kitten.Component['connectedTo']>} */ Child ... } ``` I also just opened an issue to export a friendlier type from @small-web/kitten: https://codeberg.org/kitten/globals/issues/12 In the meanwhile, you can, of course, use a `typedef`. e.g., ```js import kitten from '@small-web/kitten' import Child from './Child.component.js' /** @typedef {ReturnType<typeof kitten.Component['connectedTo']>} ConnectedChild */ export default class IndexPage extends kitten.Page { /** @type {ConnectedChild} */ Child ... } ``` > I saw somewhere that class-based components cause extra performance overhead and should be used sparingly. Is that still the case? Because at the same time it seems like they are the new, "preferred" way of using Kitten. I’d say use it unless you expect lots of components on a page. e.g., don’t use it if you’re recreating the Draw Together example with all those pixels. I’m going with not prematurely optimising as it is so much nicer to author with. > In any case, changing this to a documentation issue is totally fine. Thanks for pointing me in the right direction! Perfect, will do that now :) And thanks so much for raising the issue 💕