Never store scroll position in useState. Scroll events fire rapidly—state updates cause render thrashing and dropped frames. Use a Reanimated shared value
This skill prevents performance issues caused by tracking scroll position using React’s `useState`. Scroll events trigger many rapid updates, and storing scroll offsets in state leads to excessive re-renders, dropped frames, and janky animations. Instead, it advocates using a Reanimated shared value for UI-thread animations or a mutable ref for non-reactive scroll tracking to maintain smooth scrolling and responsive interfaces.
This skill is essential for React Native developers focused on conversion rate optimization who build scroll-driven animations or dynamic content loading. It suits performance marketers and growth leads working closely with mobile app engineers to maintain high frame rates and fluid UX in feeds or product lists. Agency strategists advising on mobile app performance will also find it valuable to prevent common pitfalls that degrade user engagement.
Practitioners first identify where scroll position is currently stored in `useState` and measure the resulting dropped frame rates or UI lag during scroll events. Next, they refactor code to replace `useState` with a Reanimated shared value when scroll position drives animations, moving logic to the UI thread to avoid React re-renders. For cases where tracking is needed without UI updates, they switch to a `useRef` to store scroll offsets, ensuring no render cycles occur. Finally, they tune `scrollEventThrottle` settings to balance scroll precision with performance needs.
Why not just throttle or debounce state updates on scroll? Throttling delays updates but still triggers renders, causing jank on frequent scroll events. Can I still use `useState` if scroll updates are infrequent? No, even low-frequency updates can cause unnecessary re-renders and impact smoothness. When should I use a shared value versus a ref? Use shared values for animations on the UI thread; use refs when you need to track scroll position without triggering renders.
Attach this skill to tasks involving React Native scroll event handling or app performance optimization. Expect improved frame rates by eliminating render thrashing when tracking scroll position. We recommend combining this skill with animation and profiling workflows to verify smoothness and responsiveness during scroll-driven interactions.
For broader context, see our roundup of claude marketing skills, and read Claude Code workflows for marketing agencies for related setup guidance.