1771771771
Deno•3y ago•
10 replies
177177177

Signal value not updating from inside of `for await of` loop inside of an IIFE

// routes/connect.tsx
import type { FunctionComponent } from 'preact'
import type { PageProps } from '$fresh/server.ts'

const api_version = 10

export default ((props) => {
  const message = useSignal('Connecting')

  ;(async () => {
    const wss = new WebSocketStream(`${
        (await (
          await fetch(`https://discord.com/api/v${api_version}/gateway`)
        ).json()).url
      }/?v=${api_version}&encoding=json`)
    const { readable } = await wss.opened

    for await (const msg of readable) {
      message.value = msg // not updating message.value

      console.log(msg) // this works
    }
  })()

  message.value = 'updated outside of the IIFE' // this works too

  return (
    <div class='max-w-screen-md mx-auto flex flex-col items-center justify-center'>
      <div class='flex gap-8 py-6'>
        <button>{message}</button>
      </div>
    </div>
  )
}) satisfies <FunctionComponent<PageProps>>

I'm using an IIFE here because otherwise the 
for await of
 loop will block the code and page keeps loading till 
WebSocketStream
 connection ends, so I did that.
But why does setting 
message.value = msg
 not update the button text, it is stuck at the initial 
Connecting
 text.
But when I set 
message.value = 'updated outside of the IIFE'
 then it works fine, the value is updating as expected.
The 
console.log(msg)
 inside the IIFE's 
for await of
 loop also works and logs the 
msg
 to the console, but still 
message.value = msg
 doesn't. Why ??
Was this page helpful?