Fix laggy scrolling on mobile app's home screen, etc. (#4108)

* Improve scrolling performance for List

* Update List.tsx

* Apply same fix to profile labels

---------

Co-authored-by: dan <dan.abramov@gmail.com>

2 files changed, 24 insertions, 10 deletions

diff --git a/src/screens/Profile/Sections/Labels.tsx b/src/screens/Profile/Sections/Labels.tsx
index 553d94d2e..67c827d90 100644
--- a/src/screens/Profile/Sections/Labels.tsx
+++ b/src/screens/Profile/Sections/Labels.tsx
@@ -111,20 +111,27 @@ export function ProfileLabelsSectionInner({
   headerHeight: number
 }) {
   const t = useTheme()
-  const contextScrollHandlers = useScrollHandlers()
 
+  // Intentionally destructured outside the main thread closure.
+  // See https://github.com/bluesky-social/social-app/pull/4108.
+  const {
+    onBeginDrag: onBeginDragFromContext,
+    onEndDrag: onEndDragFromContext,
+    onScroll: onScrollFromContext,
+    onMomentumEnd: onMomentumEndFromContext,
+  } = useScrollHandlers()
   const scrollHandler = useAnimatedScrollHandler({
     onBeginDrag(e, ctx) {
-      contextScrollHandlers.onBeginDrag?.(e, ctx)
+      onBeginDragFromContext?.(e, ctx)
     },
     onEndDrag(e, ctx) {
-      contextScrollHandlers.onEndDrag?.(e, ctx)
+      onEndDragFromContext?.(e, ctx)
     },
     onScroll(e, ctx) {
-      contextScrollHandlers.onScroll?.(e, ctx)
+      onScrollFromContext?.(e, ctx)
     },
     onMomentumEnd(e, ctx) {
-      contextScrollHandlers.onMomentumEnd?.(e, ctx)
+      onMomentumEndFromContext?.(e, ctx)
     },
   })
 
diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx
index 90f5905f1..c271481a9 100644
--- a/src/view/com/util/List.tsx
+++ b/src/view/com/util/List.tsx
@@ -44,22 +44,29 @@ function ListImpl<ItemT>(
   ref: React.Ref<ListMethods>,
 ) {
   const isScrolledDown = useSharedValue(false)
-  const contextScrollHandlers = useScrollHandlers()
   const pal = usePalette('default')
 
   function handleScrolledDownChange(didScrollDown: boolean) {
     onScrolledDownChange?.(didScrollDown)
   }
 
+  // Intentionally destructured outside the main thread closure.
+  // See https://github.com/bluesky-social/social-app/pull/4108.
+  const {
+    onBeginDrag: onBeginDragFromContext,
+    onEndDrag: onEndDragFromContext,
+    onScroll: onScrollFromContext,
+    onMomentumEnd: onMomentumEndFromContext,
+  } = useScrollHandlers()
   const scrollHandler = useAnimatedScrollHandler({
     onBeginDrag(e, ctx) {
-      contextScrollHandlers.onBeginDrag?.(e, ctx)
+      onBeginDragFromContext?.(e, ctx)
     },
     onEndDrag(e, ctx) {
-      contextScrollHandlers.onEndDrag?.(e, ctx)
+      onEndDragFromContext?.(e, ctx)
     },
     onScroll(e, ctx) {
-      contextScrollHandlers.onScroll?.(e, ctx)
+      onScrollFromContext?.(e, ctx)
 
       const didScrollDown = e.contentOffset.y > SCROLLED_DOWN_LIMIT
       if (isScrolledDown.value !== didScrollDown) {
@@ -72,7 +79,7 @@ function ListImpl<ItemT>(
     // Note: adding onMomentumBegin here makes simulator scroll
     // lag on Android. So either don't add it, or figure out why.
     onMomentumEnd(e, ctx) {
-      contextScrollHandlers.onMomentumEnd?.(e, ctx)
+      onMomentumEndFromContext?.(e, ctx)
     },
   })