It looks like the <Track /> component is not properly removing or disposing of steps when props change. I ran into this on my own project using reactronica, but I've reproduced the issue in a smaller sandbox environment: https://codesandbox.io/s/reactronica-42-step-duplication-bug-qnd8h?file=/src/App.tsx
To reproduce in the sandbox:
- Wait for the samples to load (
Play button will be disabled until onLoad runs)
- Play the initial state of the
Track which includes 4 hi-hat notes and a kick on the first step.
- Pause the track.
- Toggle the steps to be the hi-hat only set.
- Play the track again. (You should hear hi-hats only)
- Pause the track, and toggle the steps.
- Play the track - on this time around, you'll notice the kick and hi-hats sound louder. (as if they are layered on top of the original array of steps)
- Pause the track, then toggle the steps back to the hi-hat only set.
- Play the track - you will hear both the kick and hi-hats, and they sound even louder.
I've patched the issue in a branch of my fork (85405d7) which I've tested against my project using reactronica, but not this sandbox example. I imagine it will resolve it, too, but I'm not 100% sure.
It looks like the
<Track />component is not properly removing or disposing of steps when props change. I ran into this on my own project usingreactronica, but I've reproduced the issue in a smaller sandbox environment: https://codesandbox.io/s/reactronica-42-step-duplication-bug-qnd8h?file=/src/App.tsxTo reproduce in the sandbox:
Playbutton will be disabled untilonLoadruns)Trackwhich includes 4 hi-hat notes and a kick on the first step.I've patched the issue in a branch of my fork (85405d7) which I've tested against my project using reactronica, but not this sandbox example. I imagine it will resolve it, too, but I'm not 100% sure.