How to init state and update ref with next.js

[pfrlv]

Hello, i am using Valtio with a next.js project and I need to create an HtmlMediaElement after the next.js hydration is complete.
How to implement this functionality 🫤:

const state = proxy({
  canplay: false,
  playing: false,
  audio: null,
  play: async () => {
    await state.audio.play()
    state.playing = true
  },
  pause: () => {
    state.audio.pause()
    state.playing = false
  },
  init: () => {
    if(state.audio) return
    state.audio = ref(new Audio(STREAM_URL))

    function onCanplay() {
      state.canplay = true
    }

    function onError() {
      alert('Something went wrong, please try again later')
    }

    state.audio.addEventListener('error', onError)
    state.audio.addEventListener('loadedmetadata', onCanplay)
  }
})

export default () => {
  return useSnapshot(state)
}

[dai-shi]

I need to create an HtmlMediaElement after the next.js hydration is complete.

I'm not very familiar, but how would you do it with useState?

[dai-shi]

Hmm, okay. Then, what's your issue? I might be missing some background.

[pfrlv]

I can use react useRef audio.current = useRef(new Audio(STREAM_URL)) inside useEffect, that fire after next.js hydration

[pfrlv]

Hmm, okay. Then, what's your issue? I might be missing some background.

Can I use valtio/ref in the same way as react/useRef?

[dai-shi]

Sounds like state.audio = ref(new Audio(STREAM_URL)) is just fine. If you need React "ref", createRef may work instead of useRef.

[pfrlv]

We do not understand each other 😀.
Ok I'll try to work with my version, if there is something interesting I'll tell