Performance degradation when 'react-spring/konva' is used together with 'react-spring' (web)

[guopengliang]

🐛 Bug Report

I'd like to use react-spring to animate react components and use react-spring/konva to animate Konva charts. But using them together causes serious performance degradation for the animated Konva components.

The cause of the problem is that both the web and konva targets share the same Global.applyAnimatedValues method.

import * as RSWeb from 'react-spring';
import * as RSKonva from 'react-spring/konva';

console.log(RSWeb.Globals.applyAnimatedValues === RSKonva.Globals.applyAnimatedValues);
// true

Because an animated Konva component has no setAttribute method, the applyAnimatedValues method from the web target will skip and return false:
https://github.com/react-spring/react-spring/blob/de5c5059871ad0b194c040ad0eb019662a183fcb/targets/web/src/applyAnimatedValues.ts#L78-L80

So the animated Konva component is forceUpdate-ed and thrown into React reconciliation:
https://github.com/react-spring/react-spring/blob/de5c5059871ad0b194c040ad0eb019662a183fcb/packages/animated/src/withAnimated.tsx#L31-L39

...instead of using Konva's update method:
https://github.com/react-spring/react-spring/blob/de5c5059871ad0b194c040ad0eb019662a183fcb/targets/konva/src/index.ts#L9-L12

To Reproduce

Steps to reproduce the behavior:

1. use 'react-spring' to animate react components and 'react-spring/konva' to animate react-konva components.
2. record and observe Main thread for JS activities on the Performance tab in Chrome DevTools.
3. find react-konva components re-rendered (react reconciliation involved) on each animation frame.

Expected behavior

Both react-spring and react-spring/konva targets can be used simultaneously together, and have desirable performance with correctly dedicated applyAnimatedValues for each targets.

Link to repro (highly encouraged)

n/a

Environment

• react-spring v9.0.0-beta.34
• react v16.9.0
• react-konva v16.9.0-0

[aleclarson]

Yeah, multiple targets at once is not yet supported. But #808 is the first step toward it being possible.

[aleclarson]

Fixed in 9.0.0-rc.2 (#985)