Cursor rule

1---
2alwaysApply: false
3---
4 
5## Never Track Scroll Position in useState
6 
7Never store scroll position in `useState`. Scroll events fire rapidly—state
8updates cause render thrashing and dropped frames. Use a Reanimated shared value
9for animations or a ref for non-reactive tracking.
10 
11**Incorrect (useState causes jank):**
12 
13```tsx
14import { useState } from 'react'
15import {
16  ScrollView,
17  NativeSyntheticEvent,
18  NativeScrollEvent,
19} from 'react-native'
20 
21function Feed() {
22  const [scrollY, setScrollY] = useState(0)
23 
24  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
25    setScrollY(e.nativeEvent.contentOffset.y) // re-renders on every frame
26  }
27 
28  return <ScrollView onScroll={onScroll} scrollEventThrottle={16} />
29}
30```
31 
32**Correct (Reanimated for animations):**
33 
34```tsx
35import Animated, {
36  useSharedValue,
37  useAnimatedScrollHandler,
38} from 'react-native-reanimated'
39 
40function Feed() {
41  const scrollY = useSharedValue(0)
42 
43  const onScroll = useAnimatedScrollHandler({
44    onScroll: (e) => {
45      scrollY.value = e.contentOffset.y // runs on UI thread, no re-render
46    },
47  })
48 
49  return (
50    <Animated.ScrollView
51      onScroll={onScroll}
52      // higher number has better performance, but it fires less often.
53      // unset this if you need higher precision over performance.
54      scrollEventThrottle={16}
55    />
56  )
57}
58```
59 
60**Correct (ref for non-reactive tracking):**
61 
62```tsx
63import { useRef } from 'react'
64import {
65  ScrollView,
66  NativeSyntheticEvent,
67  NativeScrollEvent,
68} from 'react-native'
69 
70function Feed() {
71  const scrollY = useRef(0)
72 
73  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
74    scrollY.current = e.nativeEvent.contentOffset.y // no re-render
75  }
76 
77  return <ScrollView onScroll={onScroll} scrollEventThrottle={16} />
78}
79```
80