feat: More performant re-renders with items store

.eslintrc.cjs

@@ -15,6 +15,10 @@ module.exports = {
       }
     ],
     'perfectionist/sort-enums': 'off',
+    '@typescript-eslint/member-ordering': [
+      'error',
+      { default: ['field', 'constructor', 'method', 'signature'] }
+    ],
     '@typescript-eslint/naming-convention': [
       'error',
       {

packages/react-native-sortables/.eslintrc.cjs

@@ -9,6 +9,6 @@ module.exports = {
   },
   rules: {
     'no-relative-import-paths/no-relative-import-paths': 'off',
-    'import/no-absolute-path': 'error'
+    'import/no-absolute-path': 'error',
   }
 };

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

@@ -1,9 +1,9 @@
-import { type ReactElement } from 'react';
-import { type StyleProp, StyleSheet, type ViewStyle } from 'react-native';
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
 import { useDerivedValue } from 'react-native-reanimated';
 
 import { DEFAULT_SORTABLE_FLEX_PROPS } from '../constants';
-import { useDragEndHandler } from '../hooks';
+import { useDragEndHandler, useStoreItemsUpdater } from '../hooks';
 import {
   FLEX_STRATEGIES,
   FlexLayoutProvider,
@@ -12,20 +12,45 @@ import {
   useFlexLayoutContext,
   useStrategyKey
 } from '../providers';
-import type { DropIndicatorSettings, SortableFlexProps } from '../types';
-import { getPropsWithDefaults, orderItems, validateChildren } from '../utils';
-import { DraggableView, SortableContainer } from './shared';
+import type { DragEndCallback, SortableFlexProps } from '../types';
+import {
+  childrenToArray,
+  getPropsWithDefaults,
+  orderItems,
+  typedMemo
+} from '../utils';
+import { SortableContainer } from './shared';
+
+function SortableFlex({
+  children,
+  onDragEnd: _onDragEnd,
+  ...rest
+}: SortableFlexProps) {
+  const childrenArray = useMemo(() => childrenToArray(children), [children]);
+  const itemKeys = useMemo(
+    () => childrenArray.map(([key]) => key),
+    [childrenArray]
+  );
+
+  const onDragEnd = useDragEndHandler(_onDragEnd, {
+    order: params =>
+      function <I>(data: Array<I>) {
+        return orderItems(data, itemKeys, params, true);
+      }
+  });
+
+  useStoreItemsUpdater(itemKeys, childrenArray);
 
-function SortableFlex(props: SortableFlexProps) {
+  return <SortableFlexInner {...rest} onDragEnd={onDragEnd} />;
+}
+
+const SortableFlexInner = typedMemo(function SortableFlexInner(
+  props: {
+    onDragEnd: DragEndCallback;
+  } & Omit<SortableFlexProps, 'children' | 'onDragEnd'>
+) {
   const {
-    rest: {
-      children,
-      height,
-      onDragEnd: _onDragEnd,
-      strategy,
-      width,
-      ...styleProps
-    },
+    rest: { height, onDragEnd, strategy, width, ...styleProps },
     sharedProps: {
       DropIndicatorComponent,
       dimensionsAnimationType,
@@ -40,9 +65,6 @@ function SortableFlex(props: SortableFlexProps) {
     }
   } = getPropsWithDefaults(props, DEFAULT_SORTABLE_FLEX_PROPS);
 
-  const childrenArray = validateChildren(children);
-  const itemKeys = childrenArray.map(([key]) => key);
-
   const { flexDirection, flexWrap } = styleProps;
   const controlledContainerDimensions = useDerivedValue(() => {
     if (flexWrap === 'nowrap') {
@@ -53,30 +75,21 @@ function SortableFlex(props: SortableFlexProps) {
       : { height: false, width: width === undefined };
   }, [flexWrap, flexDirection, height, width]);
 
-  const onDragEnd = useDragEndHandler(_onDragEnd, {
-    order: params =>
-      function <I>(data: Array<I>) {
-        return orderItems(data, itemKeys, params, true);
-      }
-  });
-
   return (
     <SharedProvider
       {...sharedProps}
       controlledContainerDimensions={controlledContainerDimensions}
       initialItemsStyleOverride={styles.styleOverride}
-      itemKeys={itemKeys}
       onDragEnd={onDragEnd}>
-      <FlexLayoutProvider {...styleProps} itemsCount={itemKeys.length}>
+      <FlexLayoutProvider {...styleProps}>
         <OrderUpdaterComponent
           key={useStrategyKey(strategy)}
           predefinedStrategies={FLEX_STRATEGIES}
           strategy={strategy}
           triggerOrigin={reorderTriggerOrigin}
           useAdditionalValues={useFlexLayoutContext}
         />
-        <SortableFlexInner
-          childrenArray={childrenArray}
+        <SortableContainer
           dimensionsAnimationType={dimensionsAnimationType}
           DropIndicatorComponent={DropIndicatorComponent}
           dropIndicatorStyle={dropIndicatorStyle}
@@ -96,46 +109,7 @@ function SortableFlex(props: SortableFlexProps) {
       </FlexLayoutProvider>
     </SharedProvider>
   );
-}
-
-type SortableFlexInnerProps = {
-  childrenArray: Array<[string, ReactElement]>;
-  style: StyleProp<ViewStyle>;
-} & DropIndicatorSettings &
-  Required<
-    Pick<
-      SortableFlexProps,
-      | 'dimensionsAnimationType'
-      | 'itemEntering'
-      | 'itemExiting'
-      | 'itemsLayout'
-      | 'overflow'
-    >
-  >;
-
-function SortableFlexInner({
-  childrenArray,
-  itemEntering,
-  itemExiting,
-  itemsLayout,
-  style,
-  ...containerProps
-}: SortableFlexInnerProps) {
-  return (
-    <SortableContainer {...containerProps} style={style}>
-      {childrenArray.map(([key, child]) => (
-        <DraggableView
-          entering={itemEntering ?? undefined}
-          exiting={itemExiting ?? undefined}
-          itemKey={key}
-          key={key}
-          layout={itemsLayout ?? undefined}>
-          {child}
-        </DraggableView>
-      ))}
-    </SortableContainer>
-  );
-}
+});
 
 const styles = StyleSheet.create({
   styleOverride: {

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

@@ -1,5 +1,5 @@
-import type { PropsWithChildren, ReactNode } from 'react';
-import { Fragment, memo, useEffect } from 'react';
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
 import {
   LayoutAnimationConfig,
   useDerivedValue,
@@ -9,6 +9,7 @@ import {
 import {
   CommonValuesContext,
   ItemContextProvider,
+  ItemOutlet,
   useCommonValuesContext,
   useItemDecorationStyles,
   useItemLayoutStyles,
@@ -22,24 +23,23 @@ import {
   type LayoutTransition,
   type MeasureCallback
 } from '../../../types';
-import { getContextProvider } from '../../../utils';
+import { getContextProvider, typedMemo } from '../../../utils';
 import { SortableHandleInternal } from '../SortableHandle';
 import ActiveItemPortal from './ActiveItemPortal';
 import ItemCell from './ItemCell';
 import TeleportedItemCell from './TeleportedItemCell';
 
 const CommonValuesContextProvider = getContextProvider(CommonValuesContext);
 
-export type DraggableViewProps = PropsWithChildren<{
+export type DraggableViewProps = {
   itemKey: string;
   entering: LayoutAnimation | undefined;
   exiting: LayoutAnimation | undefined;
   layout: LayoutTransition | undefined;
   style?: AnimatedStyleProp;
-}>;
+};
 
 function DraggableView({
-  children,
   itemKey: key,
   style,
   ...layoutAnimations
@@ -88,7 +88,7 @@ function DraggableView({
         itemsOverridesStyle={itemsOverridesStyle}
         onMeasure={onMeasure}>
         <LayoutAnimationConfig skipEntering={false} skipExiting={false}>
-          {children}
+          <ItemOutlet itemKey={key} />
         </LayoutAnimationConfig>
       </ItemCell>
     );
@@ -130,23 +130,23 @@ function DraggableView({
         itemsOverridesStyle={itemsOverridesStyle}
         teleportedItemId={teleportedItemId}
         onMeasure={onMeasureItem}>
-        {children}
+        <ItemOutlet itemKey={key} />
       </TeleportedItemCell>
     </CommonValuesContextProvider>
   );
 
   return (
-    <Fragment>
+    <>
       {renderItemCell(onMeasureItem)}
       <ActiveItemPortal
         activationAnimationProgress={activationAnimationProgress}
         portalState={portalState}
         renderTeleportedItemCell={renderTeleportedItemCell}
         teleportedItemId={teleportedItemId}>
-        {children}
+        <ItemOutlet itemKey={key} />
       </ActiveItemPortal>
-    </Fragment>
+    </>
   );
 }
 
-export default memo(DraggableView);
+export default typedMemo(DraggableView);

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

@@ -1,5 +1,4 @@
 import type { ComponentType } from 'react';
-import { memo } from 'react';
 import type { ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
@@ -18,6 +17,7 @@ import type {
   DropIndicatorComponentProps,
   Vector
 } from '../../types';
+import { typedMemo } from '../../utils';
 
 const DEFAULT_STYLE: ViewStyle = {
   opacity: 0
@@ -118,4 +118,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default memo(DropIndicator);
+export default typedMemo(DropIndicator);

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

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import {
   Dimensions,
   type StyleProp,
@@ -20,9 +20,11 @@ import {
 import type {
   DimensionsAnimation,
   DropIndicatorSettings,
+  ItemLayoutAnimationSettings,
   Overflow
 } from '../../types';
 import { AbsoluteLayoutState } from '../../types';
+import { typedMemo } from '../../utils';
 import AnimatedOnLayoutView from './AnimatedOnLayoutView';
 import DropIndicator from './DropIndicator';
 
@@ -33,10 +35,11 @@ type AnimatedHeightContainerProps = PropsWithChildren<
     dimensionsAnimationType: DimensionsAnimation;
     overflow: Overflow;
     style?: StyleProp<ViewStyle>;
-  } & DropIndicatorSettings
+  } & DropIndicatorSettings &
+    Omit<ItemLayoutAnimationSettings, 'itemsLayoutTransitionMode'>
 >;
 
-export default function SortableContainer({
+function SortableContainer({
   DropIndicatorComponent,
   children,
   dimensionsAnimationType,
@@ -144,3 +147,5 @@ export default function SortableContainer({
     </Animated.View>
   );
 }
+
+export default typedMemo(SortableContainer);

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

@@ -22,7 +22,7 @@ type OptionalSharedProps =
   | 'scrollableRef'
   | keyof Omit<SortableCallbacks, 'onDragEnd'>;
 
-type DefaultSharedProps = DefaultProps<SharedProps, OptionalSharedProps>;
+export type DefaultSharedProps = DefaultProps<SharedProps, OptionalSharedProps>;
 
 export const DEFAULT_SHARED_PROPS = {
   DropIndicatorComponent: DefaultDropIndicator,

packages/react-native-sortables/src/debug/providers/DebugOutlet.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import type { SharedValue } from 'react-native-reanimated';
 
 import type {
@@ -8,10 +8,11 @@ import type {
   DebugViews
 } from '../../types/debug';
 import { DebugComponentType } from '../../types/debug';
+import { typedMemo } from '../../utils';
 import { DebugCross, DebugLine, DebugRect } from '../components';
 import { useDebugContext } from './DebugProvider';
 
-const DebugOutlet = memo(function DebugOutlet() {
+const DebugOutlet = typedMemo(function DebugOutlet() {
   const [debugViews, setDebugViews] = useState<DebugViews>({});
   const { useObserver } = useDebugContext() ?? {};
 

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

@@ -2,4 +2,5 @@ export * from './callbacks';
 export * from './handlers';
 export * from './reanimated';
 export { default as useHaptics } from './useHaptics';
+export { default as useStoreItemsUpdater } from './useStoreItemsUpdater';
 export { default as useWarnOnPropChange } from './useWarnOnPropChange';

packages/react-native-sortables/src/hooks/useStoreItemsUpdater.ts

@@ -0,0 +1,22 @@
+/* eslint-disable import/no-unused-modules */
+import { useRef } from 'react';
+
+export default function useStoreItemsUpdater<I>(
+  keys: Array<string>,
+  items: Array<I>
+) {
+  const prevKeysRef = useRef<Array<string>>([]);
+
+  childrenArray.forEach(([key, child]) => {
+    store.set(key, child);
+  });
+  store.set('itemKeys', itemKeys);
+  store.set('itemCount', itemKeys.length);
+
+  useEffect(() => {
+    if (areArraysDifferent(itemKeys, prevKeysRef.current)) {
+      indexToKey.value = itemKeys;
+      prevKeysRef.current = itemKeys;
+    }
+  }, [itemKeys, indexToKey]);
+}