SolidJS•2y ago

Mutating element onMount doesn't re-render

I am trying to mutate the innerText (or innerHTML) of a <div /> in an async function that I dispatch onMount(). This is in SSR mode, so maybe that's relevant here, but I did confirm that onMount is running in the browser only. 1. I tried holding a ref "refDiv", then mutating innerText, but that doesn't seem to mutate the DOM. Are refs copies or actual references to the DOM element? Is there a better way to approach this? 2. I also tried holding a signal "innerText" and setting that in the load function. That didn't work either, which confused me even more. 3. Mutating DOM directly did work, so the ref's tagName is at least correct. Here is repro code for the things I've tried:

// 1. mutating using a ref
// renders "<div></div>"
export default function RefMutation(props: any) {
  var refDiv: any
  async function load() {
    if (!refDiv) return
    refDiv.innerText = 'ref mutation'
    console.log(refDiv) // prints "<div>ref mutation</div>"
  }
  onMount(load)
  return <div ref={refDiv} />
}

// 2. setting a signal
// renders "<div></div>"
export default function SigMutation(props: any) {
  const [innerText, setInnerText] = createSignal('')
  async function load() {
    setInnerText('sig mutation')
  }
  onMount(load)
  return <div innerText={innerText()} />
}

// 3. mutating the dom directly
// renders "<div>dom mutation</div>"
export default function DomMutation(props: any) {
  var refDiv: any
  async function load() {
    const domDiv = document.getElementsByTagName(refDiv.tagName).item(0)! as HTMLElement
    domDiv.innerText = 'dom mutation'
  }
  onMount(load)
  return <div ref={refDiv} />
}

// 1. mutating using a ref
// renders "<div></div>"
export default function RefMutation(props: any) {
  var refDiv: any
  async function load() {
    if (!refDiv) return
    refDiv.innerText = 'ref mutation'
    console.log(refDiv) // prints "<div>ref mutation</div>"
  }
  onMount(load)
  return <div ref={refDiv} />
}

// 2. setting a signal
// renders "<div></div>"
export default function SigMutation(props: any) {
  const [innerText, setInnerText] = createSignal('')
  async function load() {
    setInnerText('sig mutation')
  }
  onMount(load)
  return <div innerText={innerText()} />
}

// 3. mutating the dom directly
// renders "<div>dom mutation</div>"
export default function DomMutation(props: any) {
  var refDiv: any
  async function load() {
    const domDiv = document.getElementsByTagName(refDiv.tagName).item(0)! as HTMLElement
    domDiv.innerText = 'dom mutation'
  }
  onMount(load)
  return <div ref={refDiv} />
}

9 Replies

Zack PitcherOP•2y ago

Basically my question is, why didn't 1. or 2. work? And does Solid provide an alternative 3. (mutating the DOM using document.getElement... etc) that is less cumbersome?

thetarnav•2y ago

  const [innerText, setInnerText] = createSignal('')
  async function load() {
    setInnerText('sig mutation')
  }
  onMount(load)
  return <div innerText={innerText()} />

  const [innerText, setInnerText] = createSignal('')
  async function load() {
    setInnerText('sig mutation')
  }
  onMount(load)
  return <div innerText={innerText()} />

this one should have worked https://playground.solidjs.com/anonymous/1181cfc1-afd4-4668-a287-3184eed0c2ae

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Zack PitcherOP•2y ago

Interesting, when I return that from SSR it doesn't contain anything Is there a way to test SSR with the playground?

thetarnav•2y ago

I usually use astro on stackblitz for that solid start doesn't have a playground now

Zack PitcherOP•2y ago

I see, thanks. Do you have any idea what could be causing this?

thetarnav•2y ago

you can use this to test hydration (replace stuff in Test.tsx with what you want) https://stackblitz.com/edit/github-tzjxcu-kga8et?file=src%2Fcomponents%2FTest.tsx

Damian Tarnawski

StackBlitz

solid-primitives hydration transition-group - StackBlitz

Run official live example code for Astro Framework Solid, created by Withastro on StackBlitz

Zack PitcherOP•2y ago

Thanks!

thetarnav•2y ago

seems to work 🤷‍♂️ https://stackblitz.com/edit/github-tzjxcu-hjzflv?file=src%2Fcomponents%2FTest.tsx

Damian Tarnawski

StackBlitz

solid-primitives ssr test - StackBlitz

Run official live example code for Astro Framework Solid, created by Withastro on StackBlitz

Zack PitcherOP•2y ago

Wow that is bizarre. But this helps because it means I'm looking in the wrong place! As an update to this, it works when I save and HMR reloads the state. But it still doesn't work on a full refresh of the page. I've even tried doing a setTimeout() inside of onMount() to delay the execution until the Solid runtime has loaded, but that still didn't work

Gaming

Programming

Mutating element onMount doesn't re-render