i have a react component in which im using react-piano-roll component, the problem is when i update my component's state, react-piano-roll component replicates itself,
here is link code https://codesandbox.io/s/prod-water-q3eg4p?file=/src/App.js
thank you for your time and suggestions
I have been struggling with this same issue and I had a look into the PianoRoll react component itself. The culprit section seems to be:
useEffect(function () {
container.current.appendChild(pianoRoll.view);
});
After changing the section to read:
useEffect(function () {
container.current.replaceChildren(pianoRoll.view);
});
the component seems to function as intended. From my understanding, useEffect runs on every render which is triggered by setState. As the append code is running each time useEffect is being triggered, the element is being duplicated each time.
My only fix I can see at the moment, unless the base react component is updated, is to make a copy of the component manually and call that instead.
https://codesandbox.io/s/boring-mopsa-cppq2v?file=/src/App.js