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