Cursor rule

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