feat: stop measures and reactions on unmount

Author: johnhaup

src/components/LazyChild/components/FullLazyChild.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { Dimensions, type LayoutChangeEvent } from 'react-native';
 import Animated, {
   measure,
@@ -10,10 +10,10 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated';
 import { useAnimatedContext } from '../../../context/AnimatedContext';
+import { logger } from '../../../utils/logger';
 import { useEnteringCallbacks } from '../hooks/useEnteringCallbacks';
 import { useVisibilityCallbacks } from '../hooks/useVisibilityCallbacks';
 import { LazyChildProps } from '../types';
-import { logger } from '../../../utils/logger';
 
 const SCREEN_HEIGHT = Dimensions.get('window').height;
 
@@ -37,18 +37,9 @@ export function FullLazyChild({
     containerStart,
     containerEnd,
     horizontal,
+    isScrollUnmounted,
   } = useAnimatedContext();
 
-  const _isMounted = useSharedValue(false);
-
-  useEffect(() => {
-    _isMounted.value = true;
-
-    return () => {
-      _isMounted.value = false;
-    };
-  }, [_isMounted]);
-
   /**
    * If onLayout returns a height or width value greater than 0.
    */
@@ -64,25 +55,25 @@ export function FullLazyChild({
 
   const _debug = useSharedValue(debug);
 
-  const _shouldFireThresholdEnter = useSharedValue(
-    typeof onEnterThresholdPass === 'function'
-  );
-  const _shouldFireThresholdExit = useSharedValue(
-    typeof onExitThresholdPass === 'function'
-  );
-  const _shouldMeasurePercentVisible = useSharedValue(
-    typeof onVisibilityEnter === 'function'
-  );
-  const _shouldFireVisibilityExit = useSharedValue(
-    typeof onVisibilityExit === 'function'
-  );
+  const shouldFireThresholdEnter = useDerivedValue(() => {
+    return typeof onEnterThresholdPass === 'function' && !isScrollUnmounted;
+  });
+  const shouldFireThresholdExit = useDerivedValue(() => {
+    return typeof onExitThresholdPass === 'function' && !isScrollUnmounted;
+  });
+  const shouldMeasurePercentVisible = useDerivedValue(() => {
+    return typeof onVisibilityEnter === 'function' && !isScrollUnmounted;
+  });
+  const shouldFireVisibilityExit = useDerivedValue(() => {
+    return typeof onVisibilityExit === 'function' && !isScrollUnmounted;
+  });
 
   const _hasValidCallback = useDerivedValue(
     () =>
-      _shouldFireThresholdEnter.value ||
-      _shouldFireThresholdExit.value ||
-      _shouldMeasurePercentVisible.value ||
-      _shouldFireVisibilityExit.value
+      shouldFireThresholdEnter.value ||
+      shouldFireThresholdExit.value ||
+      shouldMeasurePercentVisible.value ||
+      shouldFireVisibilityExit.value
   );
 
   function measureView() {
@@ -123,8 +114,8 @@ export function FullLazyChild({
     onEnterThresholdPass,
     onExitThresholdPass,
     _measurement,
-    _shouldFireThresholdEnter,
-    _shouldFireThresholdExit,
+    shouldFireThresholdEnter,
+    shouldFireThresholdExit,
     startTrigger,
     endTrigger,
     horizontal,
@@ -134,8 +125,8 @@ export function FullLazyChild({
     percentVisibleThreshold,
     onVisibilityEnter,
     onVisibilityExit,
-    _shouldMeasurePercentVisible,
-    _shouldFireVisibilityExit,
+    shouldMeasurePercentVisible,
+    shouldFireVisibilityExit,
     _measurement,
     containerStart,
     containerEnd,

src/components/LazyChild/hooks/useEnteringCallbacks.ts

@@ -12,17 +12,17 @@ export const useEnteringCallbacks = ({
   onEnterThresholdPass,
   onExitThresholdPass,
   _measurement,
-  _shouldFireThresholdEnter,
-  _shouldFireThresholdExit,
+  shouldFireThresholdEnter,
+  shouldFireThresholdExit,
   startTrigger,
   endTrigger,
   horizontal,
 }: {
   onEnterThresholdPass?: () => void;
   onExitThresholdPass?: () => void;
   _measurement: SharedValue<ReturnType<typeof measure>>;
-  _shouldFireThresholdEnter: SharedValue<boolean>;
-  _shouldFireThresholdExit: SharedValue<boolean>;
+  shouldFireThresholdEnter: SharedValue<boolean>;
+  shouldFireThresholdExit: SharedValue<boolean>;
   startTrigger: Pick<SharedValue<number>, 'value'>;
   endTrigger: Pick<SharedValue<number>, 'value'>;
   horizontal: Pick<SharedValue<boolean>, 'value'>;
@@ -35,9 +35,9 @@ export const useEnteringCallbacks = ({
       _hasFiredThresholdEntered.value = true;
       _hasFiredThresholdExited.value = false;
 
-      if (!_shouldFireThresholdExit.value) {
+      if (!shouldFireThresholdExit.value) {
         // Enter callback has fired and there is no exit callback, so it cannot refire.  Set shouldFire to false to prevent unnecessary measures.
-        _shouldFireThresholdEnter.value = false;
+        shouldFireThresholdEnter.value = false;
       }
 
       onEnterThresholdPass();
@@ -78,11 +78,11 @@ export const useEnteringCallbacks = ({
     () => _hasEntered.value,
     (hasLazyChildEntered) => {
       if (hasLazyChildEntered) {
-        if (_shouldFireThresholdEnter.value) {
+        if (shouldFireThresholdEnter.value) {
           runOnJS(handleThresholdEntered)();
         }
       } else {
-        if (_shouldFireThresholdExit.value) {
+        if (shouldFireThresholdExit.value) {
           runOnJS(handleOnThresholdExited)();
         }
       }

src/components/LazyChild/hooks/useVisibilityCallbacks.tsx

@@ -12,8 +12,8 @@ interface Props {
   percentVisibleThreshold: number;
   onVisibilityEnter?: () => void;
   onVisibilityExit?: () => void;
-  _shouldMeasurePercentVisible: SharedValue<boolean>;
-  _shouldFireVisibilityExit: SharedValue<boolean>;
+  shouldMeasurePercentVisible: SharedValue<boolean>;
+  shouldFireVisibilityExit: SharedValue<boolean>;
   _measurement: SharedValue<ReturnType<typeof measure>>;
   containerStart: Pick<SharedValue<number>, 'value'>;
   containerEnd: Pick<SharedValue<number>, 'value'>;
@@ -24,8 +24,8 @@ export const useVisibilityCallbacks = ({
   percentVisibleThreshold,
   onVisibilityEnter,
   onVisibilityExit,
-  _shouldMeasurePercentVisible,
-  _shouldFireVisibilityExit,
+  shouldMeasurePercentVisible,
+  shouldFireVisibilityExit,
   _measurement,
   containerStart,
   containerEnd,
@@ -41,9 +41,9 @@ export const useVisibilityCallbacks = ({
         _hasFiredOnVisibilityEntered.value = true;
         _hasFiredOnVisibilityExited.value = false;
 
-        if (!_shouldFireVisibilityExit.value) {
+        if (!shouldFireVisibilityExit.value) {
           // Enter callback has fired and there is no exit callback, so it cannot refire.  Set shouldFire to false to prevent unnecessary measures.
-          _shouldMeasurePercentVisible.value = false;
+          shouldMeasurePercentVisible.value = false;
         }
 
         onVisibilityEnter();
@@ -96,11 +96,11 @@ export const useVisibilityCallbacks = ({
     () => _isVisible.value,
     (isLazyChildVisible) => {
       if (isLazyChildVisible) {
-        if (_shouldMeasurePercentVisible.value) {
+        if (shouldMeasurePercentVisible.value) {
           runOnJS(handleOnVisibilityEntered)();
         }
       } else {
-        if (_shouldFireVisibilityExit.value) {
+        if (shouldFireVisibilityExit.value) {
           runOnJS(handleOnVisibilityExited)();
         }
       }

src/components/useLazyContextValues.ts

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useLayoutEffect, useMemo } from 'react';
 import { StatusBar, type LayoutChangeEvent } from 'react-native';
 import Animated, {
   AnimatedRef,
@@ -42,6 +42,14 @@ export const useLazyContextValues = ({
    */
   const scrollValue = useScrollViewOffset(ref);
 
+  const isScrollUnmounted = useSharedValue(false);
+  useLayoutEffect(() => {
+    return () => {
+      isScrollUnmounted.value = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- shared values do not trigger re-renders
+  }, []);
+
   const containerStart = useDerivedValue(() =>
     _horizontal.value
       ? _containerCoordinates.value.x
@@ -107,6 +115,7 @@ export const useLazyContextValues = ({
       startTrigger,
       endTrigger,
       horizontal: _horizontal,
+      isScrollUnmounted,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps -- shared values do not trigger re-renders
     []

src/context/AnimatedContext.ts

@@ -8,6 +8,7 @@ const initialContext = {
   startTrigger: { value: 0 },
   endTrigger: { value: 0 },
   horizontal: { value: false },
+  isScrollUnmounted: { value: false },
 };
 
 export const AnimatedContext = createContext(initialContext);