perf: Optimize rerenders caused by inlined callbacks, clean up drag state management

example/app/src/examples/SortableGrid/miscellaneous/CollapsibleItemsExample.tsx

@@ -45,18 +45,22 @@ function Example({ horizontal }: ExampleProps) {
   const dimension = horizontal ? 'width' : 'height';
 
   const renderItem = useCallback<SortableGridRenderItem<string>>(
-    ({ item }) => (
-      <Animated.View
-        layout={LinearTransition}
-        style={[
-          styles.card,
-          { [dimension]: collapsed ? sizes.lg : sizes.xxxl }
-        ]}>
-        <Animated.Text layout={LinearTransition} style={styles.text}>
-          {item}
-        </Animated.Text>
-      </Animated.View>
-    ),
+    ({ item }) => {
+      const layoutTransition = LinearTransition.delay(collapsed ? 0 : 50);
+
+      return (
+        <Animated.View
+          layout={layoutTransition}
+          style={[
+            styles.card,
+            { [dimension]: collapsed ? sizes.lg : sizes.xxxl }
+          ]}>
+          <Animated.Text layout={layoutTransition} style={styles.text}>
+            {item}
+          </Animated.Text>
+        </Animated.View>
+      );
+    },
     [collapsed, dimension]
   );
 
@@ -97,11 +101,9 @@ function Example({ horizontal }: ExampleProps) {
         scrollableRef={scrollableRef}
         autoAdjustOffsetDuringDrag
         onActiveItemDropped={() => {
-          console.log('onActiveItemDropped');
           setCollapsed(false);
         }}
         onDragStart={() => {
-          console.log('onDragStart');
           setCollapsed(true);
         }}
       />

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

@@ -7,6 +7,7 @@ import { DEFAULT_SORTABLE_FLEX_PROPS } from '../constants';
 import type { RequiredBy } from '../helperTypes';
 import type { PropsWithDefaults } from '../hooks';
 import { useDragEndHandler, usePropsWithDefaults } from '../hooks';
+import { useStableCallbackValues } from '../integrations/reanimated';
 import {
   FLEX_STRATEGIES,
   FlexProvider,
@@ -27,13 +28,24 @@ import { SortableContainer } from './shared';
 function SortableFlex(props: SortableFlexProps) {
   const {
     children,
+    onActiveItemDropped,
     onDragEnd: _onDragEnd,
+    onDragMove,
+    onDragStart,
+    onOrderChange,
     strategy,
     ...rest
   } = usePropsWithDefaults(props, DEFAULT_SORTABLE_FLEX_PROPS);
 
   const items = processChildren(children);
 
+  const callbacks = useStableCallbackValues({
+    onActiveItemDropped,
+    onDragMove,
+    onDragStart,
+    onOrderChange
+  });
+
   const onDragEnd = useDragEndHandler(_onDragEnd, {
     order: params =>
       function <I>(data: Array<I>) {
@@ -45,6 +57,7 @@ function SortableFlex(props: SortableFlexProps) {
     <ItemsProvider items={items}>
       <SortableFlexInner
         {...rest}
+        {...callbacks}
         key={useStrategyKey(strategy)}
         strategy={strategy}
         onDragEnd={onDragEnd}

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

@@ -7,7 +7,10 @@ import { runOnUI, useAnimatedStyle } from 'react-native-reanimated';
 import { DEFAULT_SORTABLE_GRID_PROPS, IS_WEB } from '../constants';
 import type { PropsWithDefaults } from '../hooks';
 import { useDragEndHandler, usePropsWithDefaults } from '../hooks';
-import { useAnimatableValue } from '../integrations/reanimated';
+import {
+  useAnimatableValue,
+  useStableCallbackValues
+} from '../integrations/reanimated';
 import {
   GRID_STRATEGIES,
   GridProvider,
@@ -26,7 +29,11 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
     columns,
     data,
     keyExtractor = defaultKeyExtractor,
+    onActiveItemDropped,
     onDragEnd: _onDragEnd,
+    onDragMove,
+    onDragStart,
+    onOrderChange,
     renderItem,
     rowHeight,
     rows,
@@ -52,6 +59,13 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
     [data, keyExtractor]
   );
 
+  const callbacks = useStableCallbackValues({
+    onActiveItemDropped,
+    onDragMove,
+    onDragStart,
+    onOrderChange
+  });
+
   const onDragEnd = useDragEndHandler(_onDragEnd, {
     data: params => orderItems(data, items, params, true)
   });
@@ -60,6 +74,7 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
     <ItemsProvider items={items} renderItem={renderItem}>
       <SortableGridInner
         {...rest}
+        {...callbacks}
         groups={groups}
         isVertical={isVertical}
         key={useStrategyKey(strategy)}

packages/react-native-sortables/src/integrations/reanimated/hooks/index.ts

@@ -2,3 +2,4 @@ export { default as useAnimatableValue } from './useAnimatableValue';
 export { default as useAnimatedDebounce } from './useAnimatedDebounce';
 export { default as useMutableValue } from './useMutableValue';
 export { default as useStableCallbackValue } from './useStableCallbackValue';
+export { default as useStableCallbackValues } from './useStableCallbackValues';

packages/react-native-sortables/src/integrations/reanimated/hooks/useStableCallbackValues.ts

@@ -0,0 +1,14 @@
+import type { AnyFunction } from '../../../helperTypes';
+import useStableCallbackValue from './useStableCallbackValue';
+
+export default function useStableCallbackValues<
+  T extends Record<string, AnyFunction>
+>(callbacks: T) {
+  return Object.fromEntries(
+    Object.entries(callbacks).map(([key, callback]) => [
+      key,
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useStableCallbackValue(callback)
+    ])
+  ) as { [K in keyof T]: T[K] };
+}

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

@@ -64,6 +64,10 @@ const { AutoScrollProvider, useAutoScrollContext } = createProvider(
   const scrollBy = useCallback(
     (distance: number, animated: boolean) => {
       'worklet';
+      if (distance === 0) {
+        return;
+      }
+
       const offset = currentScrollOffset.value + distance;
       scrollTo(
         scrollableRef,