Updating useSharedValueEffect callback

[timoisalive]

I'm using the react-native-gesture-handler and useSharedValueEffect to drive my interaction and Skia animation. However, I have a problem, that the callback function in useSharedValueEffect is not up-to-date with my state.

import {
  Canvas,
  Rect,
  useSharedValueEffect,
  useValue,
} from "@shopify/react-native-skia";
import React, { FunctionComponent, useState } from "react";
import { Button, View } from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { useSharedValue } from "react-native-reanimated";

export const SkiaCanvasExample: FunctionComponent = () => {
  const [stateValue, setStateValue] = useState(0);

  const skiaValue = useValue(0);

  const sharedValue = useSharedValue(0);

  const gesture = Gesture.Pan().onTouchesMove(({ allTouches }) => {
    sharedValue.value = allTouches[0].x;
  });

  useSharedValueEffect(() => {
    skiaValue.current = sharedValue.value + stateValue;
  }, sharedValue);

  return (
    <View style={{ flex: 1, paddingVertical: 100 }}>
      <Button
        title="Press me"
        onPress={() => {
          setStateValue(stateValue + 10);
        }}
      />

      <GestureDetector gesture={gesture}>
        <Canvas style={{ flex: 1 }}>
          <Rect width={20} height={20} y={0} x={skiaValue} />
        </Canvas>
      </GestureDetector>
    </View>
  );
};

The stateValue never changes inside the callback, and hence has no effect in the above example.

Is there a way to somehow refresh the callback? I would first try something like:

  useSharedValueEffect(() => {
    skiaValue.current = sharedValue.value + stateValue;
  }, [sharedValue, stateValue]);

but I see it only takes shared values as dependencies.

I could make the stateValue a shared value, but in my real project it wouldn't make sense to change the state into a shared value.

Any ideas?

[timoisalive]

I solved the issue with useDerivedValue hook from Reanimated. It works, but it is not very elegant and would rather like to see the useSharedValueEffect hook accepting dependencies like useDerivedValue hook does.

  const derivedValue = useDerivedValue(() => {
    return sharedValue.value + stateValue;
  }, [sharedValue, stateValue]);

  useSharedValueEffect(() => {
    skiaValue.current = derivedValue.value;
  }, derivedValue);

[wcandillon]

The most performance sensitive way to go about it here is to simply have a useEffect hook with stateValue as a dependency and then run the same callback there. We could support the dependency array you suggested but it would need a bit of thinking on our side.

[timoisalive]

Hmmm I'm not sure if I understood you correct, but doing

  useEffect(() => {
    skiaValue.current = sharedValue.value + stateValue;
  }, [sharedValue, stateValue]);

does not cut it, as the effect is not executed on sharedValue change (on touch).