perf: Optimize item measurements

packages/react-native-sortables/src/components/SortableGrid.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useMemo, useRef } from 'react';
+import { useMemo } from 'react';
 import type { DimensionValue } from 'react-native';
 import { StyleSheet } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
@@ -193,22 +193,11 @@ function SortableGridComponent<I>({
   strategy,
   ...rest
 }: SortableGridComponentProps<I>) {
-  const { handleContainerMeasurement, resetMeasurements } =
-    useMeasurementsContext();
+  const { handleContainerMeasurement } = useMeasurementsContext();
   const { mainGroupSize } = useGridLayoutContext();
 
-  const isFirstRenderRef = useRef(true);
-
   useOrderUpdater(strategy, GRID_STRATEGIES);
 
-  useLayoutEffect(() => {
-    if (isFirstRenderRef.current) {
-      isFirstRenderRef.current = false;
-      return;
-    }
-    resetMeasurements();
-  }, [groups, resetMeasurements]);
-
   const animatedInnerStyle = useAnimatedStyle(() =>
     isVertical
       ? {

packages/react-native-sortables/src/components/shared/DraggableView/ActiveItemPortal.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import type { ManualGesture } from 'react-native-gesture-handler';
 import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
 
@@ -42,7 +42,7 @@ export default function ActiveItemPortal({
   const teleportEnabled = useMutableValue(false);
   const isFirstUpdateRef = useRef(true);
 
-  const renderTeleportedItemCell = useCallback(
+  const teleportedItemCell = useMemo(
     () => (
       // We have to wrap the TeleportedItemCell in context providers as they won't
       // be accessible otherwise, when the item is rendered in the portal outlet
@@ -77,7 +77,7 @@ export default function ActiveItemPortal({
 
   const enableTeleport = useStableCallback(() => {
     isFirstUpdateRef.current = true;
-    teleport?.(teleportedItemId, renderTeleportedItemCell());
+    teleport?.(teleportedItemId, teleportedItemCell);
     onTeleport(true);
   });
 
@@ -93,8 +93,7 @@ export default function ActiveItemPortal({
     if (!checkTeleported()) return;
 
     const update = () =>
-      checkTeleported() &&
-      teleport?.(teleportedItemId, renderTeleportedItemCell());
+      checkTeleported() && teleport?.(teleportedItemId, teleportedItemCell);
 
     if (isFirstUpdateRef.current) {
       isFirstUpdateRef.current = false;
@@ -103,7 +102,7 @@ export default function ActiveItemPortal({
     } else {
       update();
     }
-  }, [isTeleported, renderTeleportedItemCell, teleport, teleportedItemId]);
+  }, [isTeleported, teleportedItemCell, teleport, teleportedItemId]);
 
   useAnimatedReaction(
     () => activationAnimationProgress.value,

packages/react-native-sortables/src/components/shared/DraggableView/DraggableView.tsx

@@ -1,9 +1,8 @@
-import { Fragment, memo, useCallback, useEffect, useState } from 'react';
-import type { LayoutChangeEvent } from 'react-native';
+import { Fragment, memo, useCallback, useState } from 'react';
+import type { View } from 'react-native';
 import { GestureDetector } from 'react-native-gesture-handler';
 import {
   LayoutAnimationConfig,
-  runOnUI,
   useDerivedValue
 } from 'react-native-reanimated';
 
@@ -16,7 +15,6 @@ import {
   ItemContextProvider,
   ItemOutlet,
   useCommonValuesContext,
-  useDragContext,
   useItemLayout,
   useItemPanGesture,
   useMeasurementsContext,
@@ -40,9 +38,7 @@ function DraggableView({
 }: DraggableViewProps) {
   const portalContext = usePortalContext();
   const commonValuesContext = useCommonValuesContext();
-  const { handleItemMeasurement, removeItemMeasurements } =
-    useMeasurementsContext();
-  const { handleDragEnd } = useDragContext();
+  const { updateItemRef } = useMeasurementsContext();
   const { activeItemKey, customHandle } = commonValuesContext;
 
   const [isHidden, setIsHidden] = useState(false);
@@ -55,22 +51,9 @@ function DraggableView({
   );
   const gesture = useItemPanGesture(key, activationAnimationProgress);
 
-  useEffect(() => {
-    return () => {
-      removeItemMeasurements(key);
-      runOnUI(() => {
-        handleDragEnd(key, activationAnimationProgress);
-      })();
-    };
-  }, [activationAnimationProgress, handleDragEnd, key, removeItemMeasurements]);
-
-  const onLayout = useCallback(
-    ({
-      nativeEvent: {
-        layout: { height, width }
-      }
-    }: LayoutChangeEvent) => handleItemMeasurement(key, { height, width }),
-    [handleItemMeasurement, key]
+  const ref = useCallback(
+    (instance: null | View) => updateItemRef(key, instance),
+    [key, updateItemRef]
   );
 
   const renderItemCell = (hidden = false) => {
@@ -84,7 +67,7 @@ function DraggableView({
         isActive={isActive}
         itemKey={key}
         layoutStyleValue={layoutStyleValue}
-        onLayout={onLayout}>
+        ref={ref}>
         <LayoutAnimationConfig skipEntering={false} skipExiting={false}>
           <ItemOutlet itemKey={key} />
         </LayoutAnimationConfig>

packages/react-native-sortables/src/components/shared/DraggableView/ItemCell.tsx

@@ -1,10 +1,6 @@
 import type { PropsWithChildren } from 'react';
-import {
-  type LayoutChangeEvent,
-  Platform,
-  StyleSheet,
-  type ViewStyle
-} from 'react-native';
+import type { View, ViewStyle } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import type { SharedValue, TransformArrayItem } from 'react-native-reanimated';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
@@ -14,7 +10,7 @@ import type {
   LayoutAnimation
 } from '../../../integrations/reanimated';
 import { useCommonValuesContext, useItemDecoration } from '../../../providers';
-import AnimatedOnLayoutView from '../AnimatedOnLayoutView';
+import { componentWithRef } from '../../../utils/react';
 
 type TransformsArray = Array<TransformArrayItem>;
 
@@ -27,21 +23,22 @@ export type ItemCellProps = PropsWithChildren<{
   hidden?: boolean;
   entering?: LayoutAnimation;
   exiting?: LayoutAnimation;
-  onLayout?: (event: LayoutChangeEvent) => void;
 }>;
 
-export default function ItemCell({
-  activationAnimationProgress,
-  baseStyle,
-  children,
-  entering,
-  exiting,
-  hidden,
-  isActive,
-  itemKey,
-  layoutStyleValue,
-  onLayout
-}: ItemCellProps) {
+const ItemCell = componentWithRef<View, ItemCellProps>(function ItemCell(
+  {
+    activationAnimationProgress,
+    baseStyle,
+    children,
+    entering,
+    exiting,
+    hidden,
+    isActive,
+    itemKey,
+    layoutStyleValue
+  },
+  ref
+) {
   const { controlledItemDimensionsStyle } = useCommonValuesContext();
 
   const decorationStyleValue = useItemDecoration(
@@ -50,29 +47,29 @@ export default function ItemCell({
     activationAnimationProgress
   );
 
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      ...decorationStyleValue.value,
-      ...layoutStyleValue.value,
-      transform: [
-        ...((layoutStyleValue.value.transform ?? []) as TransformsArray),
-        ...((decorationStyleValue.value.transform ?? []) as TransformsArray)
-      ]
-    };
-  });
+  const animatedStyle = useAnimatedStyle(() => ({
+    ...decorationStyleValue.value,
+    ...layoutStyleValue.value,
+    transform: [
+      ...((layoutStyleValue.value.transform ?? []) as TransformsArray),
+      ...((decorationStyleValue.value.transform ?? []) as TransformsArray)
+    ]
+  }));
 
   return (
     <Animated.View style={[baseStyle, styles.decoration, animatedStyle]}>
-      <AnimatedOnLayoutView
+      <Animated.View
         entering={entering}
         exiting={exiting}
-        style={[controlledItemDimensionsStyle, hidden && styles.hidden]}
-        onLayout={onLayout}>
+        ref={ref}
+        style={[controlledItemDimensionsStyle, hidden && styles.hidden]}>
         {children}
-      </AnimatedOnLayoutView>
+      </Animated.View>
     </Animated.View>
   );
-}
+});
+
+export default ItemCell;
 
 const styles = StyleSheet.create({
   decoration: Platform.select<ViewStyle>({

packages/react-native-sortables/src/components/shared/DraggableView/TeleportedItemCell.tsx

@@ -11,16 +11,14 @@ type TeleportedItemCellProps = Pick<
   | 'children'
   | 'isActive'
   | 'itemKey'
-  | 'onLayout'
 >;
 
 export default function TeleportedItemCell({
   activationAnimationProgress,
   baseStyle,
   children,
   isActive,
-  itemKey,
-  onLayout
+  itemKey
 }: TeleportedItemCellProps) {
   const teleportedItemLayoutValue = useTeleportedItemLayout(
     itemKey,
@@ -34,8 +32,7 @@ export default function TeleportedItemCell({
       baseStyle={baseStyle}
       isActive={isActive}
       itemKey={itemKey}
-      layoutStyleValue={teleportedItemLayoutValue}
-      onLayout={onLayout}>
+      layoutStyleValue={teleportedItemLayoutValue}>
       <LayoutAnimationConfig skipEntering>{children}</LayoutAnimationConfig>
     </ItemCell>
   );

packages/react-native-sortables/src/constants/props.ts

@@ -50,7 +50,6 @@ export const DEFAULT_SHARED_PROPS = {
   itemEntering: IS_WEB ? null : SortableItemEntering,
   itemExiting: IS_WEB ? null : SortableItemExiting,
   itemsLayoutTransitionMode: 'all',
-  measureDebounceDelay: 0,
   onActiveItemDropped: undefined,
   onDragMove: undefined,
   onDragStart: undefined,

packages/react-native-sortables/src/providers/shared/CommonValuesProvider.ts

@@ -93,10 +93,19 @@
     const controlledItemHeight = useDerivedValue(() =>
       typeof itemHeights.value === 'number' ? itemHeights.value : undefined
     );
-    const controlledItemDimensionsStyle = useAnimatedStyle<ViewStyle>(() => ({
-      height: controlledItemHeight.value,
-      width: controlledItemWidth.value
-    }));
+    const controlledItemDimensionsStyle = useAnimatedStyle<ViewStyle>(() => {
+      console.log(
+        'controlledItemDimensionsStyle',
+        controlledItemWidth.value,
+        controlledItemHeight.value
+      );
+      return {
+        height: controlledItemHeight.value,
+        maxHeight: controlledItemHeight.value,
+        maxWidth: controlledItemWidth.value,
+        width: controlledItemWidth.value
+      };
+    });
 
     // DRAG STATE
     const activeItemKey = useMutableValue<null | string>(null);

packages/react-native-sortables/src/providers/shared/ItemsProvider/ItemOutlet.tsx

@@ -1,13 +1,20 @@
-import { memo } from 'react';
+import { memo, useLayoutEffect } from 'react';
 
 import { useItemNode } from './hooks';
 
 type ItemOutletProps = {
   itemKey: string;
+  onUpdate?: () => void;
 };
 
-function ItemOutlet({ itemKey }: ItemOutletProps) {
-  return useItemNode(itemKey);
+function ItemOutlet({ itemKey, onUpdate }: ItemOutletProps) {
+  const node = useItemNode(itemKey);
+
+  useLayoutEffect(() => {
+    onUpdate?.();
+  }, [node, onUpdate]);
+
+  return node;
 }
 
 export default memo(ItemOutlet);

packages/react-native-sortables/src/providers/shared/ItemsProvider/ItemsProvider.tsx

@@ -29,6 +29,7 @@ const { ItemsProvider, useItemsContext } = createProvider('Items')<
       getKeys: store.getKeys,
       getNode: store.getNode,
       subscribeItem: store.subscribeItem,
+      subscribeItems: store.subscribeItems,
       subscribeKeys: store.subscribeKeys
     }
   };