Im currently using wavesurfer.js to play an audio file. I have created a useRef for the wavesurfer. On first load, I create an instance of WaveSurfer and assign it to the wavesurferRef. I am currently running this code as well
const [timeRemaining, setTimeRemaining] = useState('')
useEffect(() => {
if (playing && wavesurfer.current) {
wavesurfer.current.on('audioprocess', function () {
if (wavesurfer.current?.isPlaying()) {
const totalTime = wavesurfer.current.getDuration()
const currentTime = wavesurfer.current.getCurrentTime()
setTimeRemaining(`-${Math.round(totalTime - currentTime)}`)
}
})
}
}, [playing])
From my understanding of useState. The component should rerender everytime state changes so assume that since setTimeRemaining is called for every millisecond then the Component should rerender but when I check the logs. The useEffects that loads on component mount is not rerunning.
Why isnt my component rerendering?
Ideally, instead of useState, I should use useRef for the timeRemaining value but when I use useRef, the div that displays the value of timeRemaining doesnt show the new value of timeRemaining ref.
Here is a stackblitz example containing an example for both the usestate and useref approach