The component re-renders on each update.

[ritz078]

There should be a check for equality. PureComponent might not be a good fix as it uses shallowCompare and that will always return true even if playNotes has the same values but different reference. So we need to manually use shouldComponentUpdate.

[mickmister]

You can make a small PureComponent wrapper around it to make it a pure component, and add any other checks you need for props. I've had to do this for other libraries so that's my solution here.

Passing a callback like playNote should hold the same reference in your code, if possible. The library can not determine that it is the same anonymous function created each time, no matter what checks it does.

So if there is a fix here, I would say thatPiano should be made into a PureComponent, and the user of the component is responsible for keeping their props the same each time. React already relies heavily on shallow compare, so it should feel natural.

[finngl]

Can anyone provide an example as to how one can work around this problem? I tried to make a PureComponent wrapper, but without success.

[mickmister]

@finngl Ya I was totally wrong about what I said above. Making a wrapper doesn't solve the issue. The component in the library needs to be made into a PureComponent, then the userland code just needs to be responsible for consistent references for props.

I've also seen a ControlledPiano in the repo. I'm mobile right now so can't examine that but it may do what you need.

EDIT: I am working on a project with this library today so I can see if a PR can solve this, unless you'd be interested in submitting one @finngl

[finngl]

@mickmister Thanks for the response. A PR would be much appreciated. I haven't had time to dive into the code myself.

[finngl]

@mickmister My problem is solved! It turned out that it was a very trivial bug in my own code that caused my problem - it was not related to this issue at all.

[kevinsqi]

PRs are welcome. Sorry about the delay here, but I'm planning to look into this soon as well - I always wanted to make the component a PureComponent, but when I tried it I'd run into edge cases where the component would no longer re-render correctly, so it may take some investigation and involve API changes as well.

[ritz078]

I created on my own. Hopefully, it can help https://github.com/ritz078/raaga/blob/master/components/Piano.tsx