83 lines
1.9 KiB
Markdown
83 lines
1.9 KiB
Markdown
---
|
|
title: Never Track Scroll Position in useState
|
|
impact: HIGH
|
|
impactDescription: prevents render thrashing during scroll
|
|
tags: scroll, performance, reanimated, useRef
|
|
---
|
|
|
|
## Never Track Scroll Position in useState
|
|
|
|
Never store scroll position in `useState`. Scroll events fire rapidly—state
|
|
updates cause render thrashing and dropped frames. Use a Reanimated shared value
|
|
for animations or a ref for non-reactive tracking.
|
|
|
|
**Incorrect (useState causes jank):**
|
|
|
|
```tsx
|
|
import { useState } from 'react'
|
|
import {
|
|
ScrollView,
|
|
NativeSyntheticEvent,
|
|
NativeScrollEvent,
|
|
} from 'react-native'
|
|
|
|
function Feed() {
|
|
const [scrollY, setScrollY] = useState(0)
|
|
|
|
const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
|
|
setScrollY(e.nativeEvent.contentOffset.y) // re-renders on every frame
|
|
}
|
|
|
|
return <ScrollView onScroll={onScroll} scrollEventThrottle={16} />
|
|
}
|
|
```
|
|
|
|
**Correct (Reanimated for animations):**
|
|
|
|
```tsx
|
|
import Animated, {
|
|
useSharedValue,
|
|
useAnimatedScrollHandler,
|
|
} from 'react-native-reanimated'
|
|
|
|
function Feed() {
|
|
const scrollY = useSharedValue(0)
|
|
|
|
const onScroll = useAnimatedScrollHandler({
|
|
onScroll: (e) => {
|
|
scrollY.value = e.contentOffset.y // runs on UI thread, no re-render
|
|
},
|
|
})
|
|
|
|
return (
|
|
<Animated.ScrollView
|
|
onScroll={onScroll}
|
|
// higher number has better performance, but it fires less often.
|
|
// unset this if you need higher precision over performance.
|
|
scrollEventThrottle={16}
|
|
/>
|
|
)
|
|
}
|
|
```
|
|
|
|
**Correct (ref for non-reactive tracking):**
|
|
|
|
```tsx
|
|
import { useRef } from 'react'
|
|
import {
|
|
ScrollView,
|
|
NativeSyntheticEvent,
|
|
NativeScrollEvent,
|
|
} from 'react-native'
|
|
|
|
function Feed() {
|
|
const scrollY = useRef(0)
|
|
|
|
const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
|
|
scrollY.current = e.nativeEvent.contentOffset.y // no re-render
|
|
}
|
|
|
|
return <ScrollView onScroll={onScroll} scrollEventThrottle={16} />
|
|
}
|
|
```
|