singular-particular-space/skills/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