chore: derive end reached value instead of reaction

johnhaup · May 11, 2024 · 57f085f · 57f085f
1 parent 9eba8ed
commit 57f085f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 31 deletions.
diff --git a/src/components/LazyChild.tsx b/src/components/LazyChild.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import Animated, {
   measure,
   runOnJS,
@@ -24,12 +24,12 @@ export function LazyChild({
   const _viewRef = useAnimatedRef<Animated.View>();
   const hasFiredTrigger = useSharedValue(false);
 
-  const handleTrigger = () => {
+  const handleTrigger = useCallback(() => {
     if (!hasFiredTrigger.value) {
       hasFiredTrigger.value = true;
       onThresholdPass();
     }
-  };
+  }, [hasFiredTrigger, onThresholdPass]);
 
   useAnimatedReaction(
     () => {

diff --git a/src/components/LazyScrollView.tsx b/src/components/LazyScrollView.tsx
@@ -1,7 +1,6 @@
-import React, { useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { View, type LayoutChangeEvent } from 'react-native';
 import Animated, {
-  useAnimatedReaction,
   useAnimatedRef,
   useDerivedValue,
   useScrollViewOffset,
@@ -39,39 +38,36 @@ export function LazyScrollView({
    * Starts at 0 and increases as the user scrolls down
    */
   const scrollValue = useScrollViewOffset(_scrollRef);
-  const hasReachedEnd = useSharedValue(false);
+  const hasReachedEnd = useDerivedValue(() => {
+    if (!_contentHeight.value || !_containerHeight.value) {
+      return false;
+    }
+
+    return scrollValue.value >= _contentHeight.value - _containerHeight.value;
+  });
   const triggerValue = useDerivedValue(
     () => _containerHeight.value + _offset.value
   );
 
-  useAnimatedReaction(
-    () => {
-      if (!_contentHeight.value || !_containerHeight.value) {
-        return false;
-      }
-
-      return scrollValue.value >= _contentHeight.value - _containerHeight.value;
+  const onLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      _containerHeight.value = e.nativeEvent.layout.height;
+      _wrapperRef.current?.measureInWindow(
+        (_: number, y: number, _2: number, height: number) => {
+          _scrollViewTopY.value = y;
+          _contentHeight.value = height;
+        }
+      );
     },
-    (reachedEnd) => {
-      if (reachedEnd && !hasReachedEnd.value) {
-        hasReachedEnd.value = true;
-      }
-    }
+    [_containerHeight, _contentHeight, _scrollViewTopY]
   );
 
-  const onLayout = (e: LayoutChangeEvent) => {
-    _containerHeight.value = e.nativeEvent.layout.height;
-    _wrapperRef.current?.measureInWindow(
-      (_: number, y: number, _2: number, height: number) => {
-        _scrollViewTopY.value = y;
-        _contentHeight.value = height;
-      }
-    );
-  };
-
-  const onContentContainerLayout = (e: LayoutChangeEvent) => {
-    _contentHeight.value = e.nativeEvent.layout.height;
-  };
+  const onContentContainerLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      _contentHeight.value = e.nativeEvent.layout.height;
+    },
+    [_contentHeight]
+  );
 
   return (
     <Animated.ScrollView