HausApp/.agents/skills/vercel-react-native-skills/rules/animation-derived-value.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Prefer useDerivedValue Over useAnimatedReaction	MEDIUM	cleaner code, automatic dependency tracking	animation, reanimated, derived-value

Prefer useDerivedValue Over useAnimatedReaction

When deriving a shared value from another, use useDerivedValue instead of useAnimatedReaction. Derived values are declarative, automatically track dependencies, and return a value you can use directly. Animated reactions are for side effects, not derivations.

Incorrect (useAnimatedReaction for derivation):

import { useSharedValue, useAnimatedReaction } from "react-native-reanimated";

function MyComponent() {
  const progress = useSharedValue(0);
  const opacity = useSharedValue(1);

  useAnimatedReaction(
    () => progress.value,
    (current) => {
      opacity.value = 1 - current;
    },
  );

  // ...
}

Correct (useDerivedValue):

import { useSharedValue, useDerivedValue } from "react-native-reanimated";

function MyComponent() {
  const progress = useSharedValue(0);

  const opacity = useDerivedValue(() => 1 - progress.get());

  // ...
}

Use useAnimatedReaction only for side effects that don't produce a value (e.g., triggering haptics, logging, calling runOnJS).

Reference: Reanimated useDerivedValue