lambda-packages icon indicating copy to clipboard operation
lambda-packages copied to clipboard

onMount not called in nested hydrated Solid.js components

Open DevHusariaSolutions opened this issue 3 years ago • 12 comments

What version of astro are you using?

1.0.5

Are you using an SSR adapter? If so, which one?

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

I have code, which should update signal state and render app using <Show> component.

export function AppLayout(props: { children: JSXElement }) {
  const c = children(() => props.children)
  const [show, setShow] = createSignal(false)

  onMount(() =>
    setTimeout(() => {
      setShow(true)
      console.log('🚀 ~ file: AppLayout.tsx ~ line 14 ~ AppLayout ~ onMount', show()) // it shows true
    }, 300)
  )

  return (
    <Show when={show()}>
      <div id="root">
        <FallingStarsWrapper />
        <Navbar />
        <div id="app-content">
          {c()}
          <Footer />
        </div>
      </div>
    </Show>
  )
}
  1. onMount doesn't fire
  2. switching to another hook (createRenderEffect) does the job, but once signal is update - no change in UI occurs

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-sdeict?file=src/components/Counter.tsx

Participation

  • [ ] I am willing to submit a pull request for this issue.

DevHusariaSolutions avatar Aug 16 '22 08:08 DevHusariaSolutions