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