Cursor rule

1---
2alwaysApply: false
3---
4 
5## State Must Represent Ground Truth
6 
7State variables—both React `useState` and Reanimated shared values—should
8represent the actual state of something (e.g., `pressed`, `progress`, `isOpen`),
9not derived visual values (e.g., `scale`, `opacity`, `translateY`). Derive
10visual values from state using computation or interpolation.
11 
12**Incorrect (storing the visual output):**
13 
14```tsx
15const scale = useSharedValue(1)
16 
17const tap = Gesture.Tap()
18  .onBegin(() => {
19    scale.set(withTiming(0.95))
20  })
21  .onFinalize(() => {
22    scale.set(withTiming(1))
23  })
24 
25const animatedStyle = useAnimatedStyle(() => ({
26  transform: [{ scale: scale.get() }],
27}))
28```
29 
30**Correct (storing the state, deriving the visual):**
31 
32```tsx
33const pressed = useSharedValue(0) // 0 = not pressed, 1 = pressed
34 
35const tap = Gesture.Tap()
36  .onBegin(() => {
37    pressed.set(withTiming(1))
38  })
39  .onFinalize(() => {
40    pressed.set(withTiming(0))
41  })
42 
43const animatedStyle = useAnimatedStyle(() => ({
44  transform: [{ scale: interpolate(pressed.get(), [0, 1], [1, 0.95]) }],
45}))
46```
47 
48**Why this matters:**
49 
50State variables should represent real "state", not necessarily a desired end
51result.
52 
531. **Single source of truth** — The state (`pressed`) describes what's
54   happening; visuals are derived
552. **Easier to extend** — Adding opacity, rotation, or other effects just
56   requires more interpolations from the same state
573. **Debugging** — Inspecting `pressed = 1` is clearer than `scale = 0.95`
584. **Reusable logic** — The same `pressed` value can drive multiple visual
59   properties
60 
61**Same principle for React state:**
62 
63```tsx
64// Incorrect: storing derived values
65const [isExpanded, setIsExpanded] = useState(false)
66const [height, setHeight] = useState(0)
67 
68useEffect(() => {
69  setHeight(isExpanded ? 200 : 0)
70}, [isExpanded])
71 
72// Correct: derive from state
73const [isExpanded, setIsExpanded] = useState(false)
74const height = isExpanded ? 200 : 0
75```
76 
77State is the minimal truth. Everything else is derived.
78