1---
2title: Prefer useDerivedValue Over useAnimatedReaction
3impact: MEDIUM
4impactDescription: cleaner code, automatic dependency tracking
5tags: animation, reanimated, derived-value
6---
7 
8## Prefer useDerivedValue Over useAnimatedReaction
9 
10When deriving a shared value from another, use `useDerivedValue` instead of
11`useAnimatedReaction`. Derived values are declarative, automatically track
12dependencies, and return a value you can use directly. Animated reactions are
13for side effects, not derivations.
14 
15**Incorrect (useAnimatedReaction for derivation):**
16 
17```tsx
18import { useSharedValue, useAnimatedReaction } from 'react-native-reanimated'
19 
20function MyComponent() {
21  const progress = useSharedValue(0)
22  const opacity = useSharedValue(1)
23 
24  useAnimatedReaction(
25    () => progress.value,
26    (current) => {
27      opacity.value = 1 - current
28    }
29  )
30 
31  // ...
32}
33```
34 
35**Correct (useDerivedValue):**
36 
37```tsx
38import { useSharedValue, useDerivedValue } from 'react-native-reanimated'
39 
40function MyComponent() {
41  const progress = useSharedValue(0)
42 
43  const opacity = useDerivedValue(() => 1 - progress.get())
44 
45  // ...
46}
47```
48 
49Use `useAnimatedReaction` only for side effects that don't produce a value
50(e.g., triggering haptics, logging, calling `runOnJS`).
51 
52Reference:
53[Reanimated useDerivedValue](https://docs.swmansion.com/react-native-reanimated/docs/core/useDerivedValue)
54