React component: Infinite loop if peaks option is specified

[Yorams]

Bug description

Hi, great work with the react component. However, I am running into a problem. When I define the option “peaks” I get an infinite loop with the in the console the message “Warning: Maximum update depth exceeded...”.

I did not see an option in the @wavesurfer/react to open an issue. I also saw a similar pull request for a similar issue with a different option. However, I don't see how this is also the case for the peaks option.

When specifying the peaks data, the waveform does just generate correctly. But thus with an infinite render loop.

Environment

• Browser: Chromium (because the use of Electron)

Minimal code snippet

import { useRef } from "react"
import { useWavesurfer } from "@wavesurfer/react"

const About = () => {
    const containerRef = useRef(null)

    const { wavesurfer, isReady, isPlaying, currentTime } = useWavesurfer({
        container: containerRef,
        waveColor: "purple",
        height: 100,
    })

    async function loadFile() {
        if (wavesurfer) {
            const filePath = "resources/test.wav"
            const audioBuffer = await window.api.loadMediaFile(filePath)
            wavesurfer.loadBlob(new Blob([audioBuffer]))
        }
    }

    const onPlayPause = () => {
        wavesurfer && wavesurfer.playPause()
    }

    return (
        <>
            <div ref={containerRef} />

            <button onClick={onPlayPause}>{isPlaying ? "Pause" : "Play"}</button>
            <button onClick={() => loadFile()}>Open file</button>
        </>
    )
}

export default About

Expected result

The react component loaded without a infinite loop.

Obtained result

A infinite loop.

Screenshots

[Yorams]

To add something; i can workaround it by using memo:

const peaks = useMemo(() => [peakData.data], [peakData]); // Memoize the peaks array

    const { wavesurfer, isReady, isPlaying, currentTime } = useWavesurfer({
        container: containerRef,
        waveColor: "purple",
        height: 100,
    })

[katspaugh]

That's not a bug. If you inline objects or arrays w/o memoization, it will trigger a React render.

In your case just passing peaks: peakData.data without wrapping in into an array would also do the trick.

Thank you for the donation btw! 🙏

[Yorams]

Thanks for your quick reply. I see that if you fill in the option as on the example page with pre-decoded data, you still get an infinite loop.

This will still be a React quirk it seems to me then, right? I have not worked with React for that long, so not all the mechanics are clear to me yet.

const { wavesurfer, isReady, isPlaying, currentTime } = useWavesurfer({
        container: containerRef,
        height: 100,
        waveColor: "violet",
        peaks: [
            [
                0, 0.0023595101665705442, 0.012107174843549728, 0.005919494666159153, -0.31324470043182373, 0.1511787623167038, 0.2473851442337036,
                0.11443428695201874, -0.036057762801647186, -0.0968964695930481, -0.03033737652003765, 0.10682467371225357, 0.23974689841270447,
                0.013210971839725971, -0.12377244979143143, 0.046145666390657425, -0.015757400542497635, 0.10884027928113937, 0.06681904196739197,
                0.09432944655418396, -0.17105795443058014, -0.023439358919858932, -0.10380347073078156, 0.0034454423002898693, 0.08061369508504868,
                0.026129156351089478, 0.18730352818965912, 0.020447958260774612, -0.15030759572982788, 0.05689578503370285, -0.0009095853311009705,
                0.2749626338481903, 0.2565386891365051, 0.07571295648813248, 0.10791446268558502, -0.06575305759906769, 0.15336275100708008,
                0.07056761533021927, 0.03287476301193237, -0.09044631570577621, 0.01777501218020916, -0.04906218498945236, -0.04756792634725571,
                -0.006875281687825918, 0.04520256072282791, -0.02362387254834175, -0.0668797641992569, 0.12266506254673004, -0.10895221680402756,
                0.03791835159063339, -0.0195105392485857, -0.031097881495952606, 0.04252675920724869, -0.09187793731689453, 0.0829525887966156,
                -0.003812957089394331, 0.0431736595928669, 0.07634212076663971, -0.05335947126150131, 0.0345163568854332, -0.049201950430870056,
                0.02300390601158142, 0.007677287794649601, 0.015354577451944351, 0.007677287794649601, 0.007677288725972176,
            ],
        ],
        normalize: true,
        duration: 22,
    })

[katspaugh]

Yes, normally it shouldn't cause an infinite loop though, so there's some combination of factors at play. But either way it's not good to pass literal objects/arrays/functions as React props. They should be memoized with useMemo/useCallback as per your workaround.

[Yorams]

Good to know and thanks for the explanation!