Nested createEffect doesn't refire

Question

I am not sure, if I have correctly reproduced my problem but here it is:

On render signal, I have some sort of object creation that leads to more create effects that depend on update signal. But somehow the scope gets disposed and it only fires once at creation time. Even though I have references to these objects, how can I make sure nested createEffect keeps firing?

import { render } from 'solid-js/web';
import { on, createSignal, createEffect } from 'solid-js'

function HelloWorld() {

  let [render, setRender] = createSignal(undefined, { equals: false })

  let [update, setUpdate] = createSignal(undefined, { equals: false })
let i = 0

  createEffect(on(render, () => {
    if (i++ === 1) {
      createEffect(on(update, () => {
        console.log('inside')
      }))
    }
  }))

  createEffect(on(update, () => {
    console.log('regular', i)
  }))

 setInterval(() => {
   setUpdate();
    setRender();
  })
  return <div>Hello World!</div>;
}

render(() => <HelloWorld />, document.getElementById('app'))

I want regular and inside logs on every interval.

Answer 1

You can use createRoot to overwrite the root of the nested createEffect. Otherwise it will be disposed on each rerun of the "parent" effect.

createEffect(() => {
   createRoot(dispose => {
      // effect will be disposed only when
      // the dispose() fn get's called
      createEffect(() => {...})
   })
})

https://playground.solidjs.com/?hash=-999371052&version=1.3.13