Actualmente estoy usando wavesurfer.js para reproducir un archivo de audio. He creado un useRef para wavesurfer. En la primera carga, creo una instancia de WaveSurfer y la asigno a wavesurferRef. Actualmente estoy ejecutando este código también
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])Desde mi comprensión de useState. El componente debe volver a procesarse cada vez que cambia el estado, así que suponga que, dado que se llama a setTimeRemaining cada milisegundo, el componente debería volver a procesarse, pero cuando verifico los registros. El useEffects que se carga en el montaje del componente no se vuelve a ejecutar.
¿Por qué no se vuelve a renderizar mi componente?
Idealmente, en lugar de useState, debería usar useRef para el valor de timeRemaining pero cuando uso useRef, el div que muestra el valor de timeRemaining no muestra el nuevo valor de timeRemaining ref.
Aquí hay un ejemplo de stackblitz que contiene un ejemplo para el enfoque usestate y useref