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} />
}

// 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} />
}

Mutating element onMount doesn't re-render

Similar Threads

Mutating element onMount doesn't re-render

Similar Threads

Similar Threads

Similar Threads