memory leak in useDrawCallback

related to #625

Any closure dependency of useDrawCallback lives forever. The draw callback function does appear to be garbage collected, however.

Steps to reproduce

this is the example code

export const SkiaGradientImp = ({
  width,
  height,
}: {
  width: number;
  height: number;
}) => {
  const paint = Skia.Paint();
  const onDraw = useDrawCallback((canvas) => {
    // Cyan Circle
    paint.setShader(
      Skia.Shader.MakeLinearGradient(
        Skia.Point(0, 0),
        Skia.Point(width, height),
        ["red", "cyan", "lime"].map((color) => Skia.Color(color)),
        null,
        TileMode.Clamp
      )
    );
    canvas.drawRect(Skia.XYWHRect(0, 0, width, height), paint);
  });
  return <SkiaView style={{ width, height }} onDraw={onDraw} />;
};

export const PerformanceGradients = () => {
  const [index, setIndex] = useState(0);
  return (
    <TouchableWithoutFeedback onPress={() => setIndex((i) => i + 1)}>
      <View style={{ flex: 1, flexDirection: "row", flexWrap: "wrap" }}>
        {new Array(300).fill(0).map((_, i) => (
          <SkiaGradientImp key={`${index}-${i}`} width={30} height={30} />
        ))}
      </View>
    </TouchableWithoutFeedback>
  );
};

If you press the button, you will have 300 views in memory but 600 paints objects. If paint is not a closure dependency (we move it’s creation in the callback), it appears to be deleted properly.

In the case of the renderer, the dependencies to the closure are enormous et therefore the memory leak is much more obvious to notice.

[chrfalch]

Sent!

[chrfalch]

(Just a small note, running on device (iOS) does not show any signs of memory leaks either.)