When and how to use dependencies of useAnimatedStyle

[JasperH8g]

I think I have read the documentation about this a million times, but I can't bring myself to understanding it 😅 When is it appropriate to use the different options of the dependencies in useAnimatedStyle?

https://docs.swmansion.com/react-native-reanimated/docs/api/hooks/useAnimatedStyle/#dependencies-array

Let's say I've got this component:

function Box() {
  const opacity = useSharedValue(0);

  const animatedStyles = useAnimatedStyle(() => ({
    opacity: opacity.value,
  }));

  const onClick = useCallback(() => {
    opacity.value = withTiming(1, { duration: 200 });
  }, [opacity]);

  return (
    <>
      <Animated.View style={[styles.box, animatedStyles]} />
      <Button onPress={onClick} title="Move" />
    </>
  );
}

So, the useAnimatedStyle is dependent on the shared value. Should I leave out de deps, define an empty array, [opacity] or [opacity.value]? I've got a hunch that this decision changes when the style-definition is dependent on a value from useState or changing props, is that correct?

[jerryjfwang]

I believe you should only use that dependency array if your animated style worklet function depends on values from the JS thread. You do not need to include shared values in the dependency array. For example:

const [isShown, setIsShown] = useState(false)
const animatedStyle = useAnimatedStyle(() => ({
  opacity: isShown ? 1 : 0
}),
[isShown])

[JasperH8g]

Alright, the distinction between the JS and UI-thread totally makes sense. Thanks!