perf: Replace useSharedValue with useMutableValue (#408)

## Description

This PR replaces all `useSharedValue` usages with `useMutableValue`.
`useSharedValue` is heavier because of the cleanup `useEffect` that
cancels currently running animation if there is any:

```
export function useSharedValue<Value>(initialValue: Value): SharedValue<Value> {
  const [mutable] = useState(() => makeMutable(initialValue));
  useEffect(() => {
    return () => {
      cancelAnimation(mutable);
    };
  }, [mutable]);
  return mutable;
}
```

I don't need this behavior as I never use infinite animations and, in
most cases, don't use animations at all, rather update value by myself.
I only use animations for items reordering and the drop indicator, but
since they are just short `withTiming` animations, the cleanup is not
necessary. Even if the animation keeps running after the view was
unmounted, it runs for a brief while, so there is no performance benefit
in eager cleanup and it's better to reduce the number of unnecessary
`useEffect` hooks.

Author: MatiPl01

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

@@ -2,11 +2,11 @@ import { type PropsWithChildren, type ReactNode, useEffect } from 'react';
 import {
   runOnJS,
   type SharedValue,
-  useAnimatedReaction,
-  useSharedValue
+  useAnimatedReaction
 } from 'react-native-reanimated';
 
 import { usePortalContext } from '../../../providers';
+import { useMutableValue } from '../../../utils';
 
 type ActiveItemPortalProps = PropsWithChildren<{
   teleportedItemId: string;
@@ -21,7 +21,7 @@ export default function ActiveItemPortal({
   teleportedItemId
 }: ActiveItemPortalProps) {
   const { teleport } = usePortalContext()!;
-  const teleportEnabled = useSharedValue(false);
+  const teleportEnabled = useMutableValue(false);
 
   useEffect(() => {
     if (teleportEnabled.value) {

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

@@ -3,8 +3,7 @@ import { Fragment, memo, useEffect, useState } from 'react';
 import { GestureDetector } from 'react-native-gesture-handler';
 import {
   LayoutAnimationConfig,
-  useDerivedValue,
-  useSharedValue
+  useDerivedValue
 } from 'react-native-reanimated';
 
 import {
@@ -17,7 +16,7 @@ import {
   usePortalContext
 } from '../../../providers';
 import type { AnimatedStyleProp, LayoutAnimation } from '../../../types';
-import { getContextProvider } from '../../../utils';
+import { getContextProvider, useMutableValue } from '../../../utils';
 import ActiveItemPortal from './ActiveItemPortal';
 import ItemCell from './ItemCell';
 import TeleportedItemCell from './TeleportedItemCell';
@@ -47,7 +46,7 @@ function DraggableView({
   const teleportedItemId = `${componentId}-${key}`;
 
   const [isTeleported, setIsTeleported] = useState(false);
-  const activationAnimationProgress = useSharedValue(0);
+  const activationAnimationProgress = useMutableValue(0);
   const isActive = useDerivedValue(() => activeItemKey.value === key);
   const itemStyles = useItemStyles(key, isActive, activationAnimationProgress);
   const gesture = useItemPanGesture(key, activationAnimationProgress);

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

@@ -8,7 +8,6 @@ import Animated, {
   useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
-  useSharedValue,
   withTiming
 } from 'react-native-reanimated';
 
@@ -18,6 +17,7 @@ import type {
   DropIndicatorComponentProps,
   Vector
 } from '../../types';
+import { useMutableValue } from '../../utils';
 
 const DEFAULT_STYLE: ViewStyle = {
   opacity: 0
@@ -42,13 +42,13 @@ function DropIndicator({ DropIndicatorComponent, style }: DropIndicatorProps) {
   // Clone the array in order to prevent user from mutating the internal state
   const orderedItemKeys = useDerivedValue(() => [...indexToKey.value]);
 
-  const dropIndex = useSharedValue(0);
-  const dropPosition = useSharedValue<Vector>({ x: 0, y: 0 });
-  const prevUpdateItemKey = useSharedValue<null | string>(null);
-  const dimensions = useSharedValue<Dimensions | null>(null);
+  const dropIndex = useMutableValue(0);
+  const dropPosition = useMutableValue<Vector>({ x: 0, y: 0 });
+  const prevUpdateItemKey = useMutableValue<null | string>(null);
+  const dimensions = useMutableValue<Dimensions | null>(null);
 
-  const x = useSharedValue<null | number>(null);
-  const y = useSharedValue<null | number>(null);
+  const x = useMutableValue<null | number>(null);
+  const y = useMutableValue<null | number>(null);
 
   useAnimatedReaction(
     () => ({

packages/react-native-sortables/src/hooks/reanimated/useStableCallbackValue.ts

@@ -1,11 +1,8 @@
 import { useCallback, useEffect } from 'react';
-import {
-  isWorkletFunction,
-  runOnJS,
-  useSharedValue
-} from 'react-native-reanimated';
+import { isWorkletFunction, runOnJS } from 'react-native-reanimated';
 
 import type { AnyFunction } from '../../types';
+import { useMutableValue } from '../../utils';
 
 // We cannot store a function as a SharedValue because reanimated will treat
 // it as an animation and will try to execute the animation when assigned
@@ -39,7 +36,7 @@ const wrap = <C extends AnyFunction>(callback: C): WrappedCallback<C> => {
 export default function useStableCallbackValue<C extends AnyFunction>(
   callback?: C
 ) {
-  const stableCallback = useSharedValue<null | WrappedCallback<C>>(null);
+  const stableCallback = useMutableValue<null | WrappedCallback<C>>(null);
 
   useEffect(() => {
     if (callback) {

packages/react-native-sortables/src/providers/layout/flex/FlexLayoutProvider.tsx

@@ -1,10 +1,6 @@
 import { type PropsWithChildren, useCallback } from 'react';
 import type { SharedValue } from 'react-native-reanimated';
-import {
-  useAnimatedReaction,
-  useDerivedValue,
-  useSharedValue
-} from 'react-native-reanimated';
+import { useAnimatedReaction, useDerivedValue } from 'react-native-reanimated';
 
 import { type DEFAULT_SORTABLE_FLEX_PROPS, IS_WEB } from '../../../constants';
 import { useDebugContext } from '../../../debug';
@@ -14,7 +10,7 @@ import {
   type RequiredBy,
   type SortableFlexStyle
 } from '../../../types';
-import { haveEqualPropValues } from '../../../utils';
+import { haveEqualPropValues, useMutableValue } from '../../../utils';
 import { useCommonValuesContext, useMeasurementsContext } from '../../shared';
 import { createProvider } from '../../utils';
 import { calculateLayout, updateLayoutDebugRects } from './utils';
@@ -66,7 +62,7 @@ const { FlexLayoutProvider, useFlexLayoutContext } = createProvider(
   const { applyControlledContainerDimensions } = useMeasurementsContext();
   const debugContext = useDebugContext();
 
-  const keyToGroup = useSharedValue<Record<string, number>>({});
+  const keyToGroup = useMutableValue<Record<string, number>>({});
 
   const columnGap = useDerivedValue(() => columnGap_ ?? gap);
   const rowGap = useDerivedValue(() => rowGap_ ?? gap);
@@ -109,7 +105,7 @@ const { FlexLayoutProvider, useFlexLayoutContext } = createProvider(
     };
   });
 
-  const appliedLayout = useSharedValue<FlexLayout | null>(null);
+  const appliedLayout = useMutableValue<FlexLayout | null>(null);
 
   // Because the number of groups can dynamically change after order change
   // and we can't detect that in the React runtime, we are creating debug

packages/react-native-sortables/src/providers/layout/flex/updates/insert/index.ts

@@ -1,9 +1,5 @@
 import type { SharedValue } from 'react-native-reanimated';
-import {
-  useAnimatedReaction,
-  useDerivedValue,
-  useSharedValue
-} from 'react-native-reanimated';
+import { useAnimatedReaction, useDerivedValue } from 'react-native-reanimated';
 
 import type {
   Coordinate,
@@ -15,7 +11,8 @@ import {
   error,
   gt as gt_,
   lt as lt_,
-  reorderInsert
+  reorderInsert,
+  useMutableValue
 } from '../../../../../utils';
 import {
   getAdditionalSwapOffset,
@@ -80,10 +77,12 @@ const useInsertStrategy: SortableFlexStrategyFactory = ({
     crossGap = rowGap;
   }
 
-  const swappedBeforeIndexes = useSharedValue<ItemGroupSwapResult | null>(null);
-  const swappedAfterIndexes = useSharedValue<ItemGroupSwapResult | null>(null);
-  const swappedBeforeLayout = useSharedValue<FlexLayout | null>(null);
-  const swappedAfterLayout = useSharedValue<FlexLayout | null>(null);
+  const swappedBeforeIndexes = useMutableValue<ItemGroupSwapResult | null>(
+    null
+  );
+  const swappedAfterIndexes = useMutableValue<ItemGroupSwapResult | null>(null);
+  const swappedBeforeLayout = useMutableValue<FlexLayout | null>(null);
+  const swappedAfterLayout = useMutableValue<FlexLayout | null>(null);
   const debugBox = useDebugBoundingBox();
 
   const activeGroupIndex = useDerivedValue(() => {

packages/react-native-sortables/src/providers/layout/grid/GridLayoutProvider.tsx

@@ -2,8 +2,7 @@ import { type PropsWithChildren, useCallback } from 'react';
 import {
   type SharedValue,
   useAnimatedReaction,
-  useDerivedValue,
-  useSharedValue
+  useDerivedValue
 } from 'react-native-reanimated';
 
 import { IS_WEB } from '../../../constants';
@@ -14,6 +13,7 @@ import {
   type GridLayout,
   type GridLayoutContextType
 } from '../../../types';
+import { useMutableValue } from '../../../utils';
 import { useCommonValuesContext, useMeasurementsContext } from '../../shared';
 import { createProvider } from '../../utils';
 import { calculateLayout } from './utils';
@@ -69,7 +69,7 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
    * width - in vertical orientation (default) (columns are groups)
    * height - in horizontal orientation (rows are groups)
    */
-  const mainGroupSize = useSharedValue<null | number>(rowHeight ?? null);
+  const mainGroupSize = useMutableValue<null | number>(rowHeight ?? null);
 
   // MAIN GROUP SIZE UPDATER
   useAnimatedReaction(

packages/react-native-sortables/src/providers/layout/grid/updates/insert.ts

@@ -1,7 +1,11 @@
-import { useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
+import { useAnimatedReaction } from 'react-native-reanimated';
 
 import { EMPTY_ARRAY } from '../../../../constants';
-import { areArraysDifferent, reorderInsert } from '../../../../utils';
+import {
+  areArraysDifferent,
+  reorderInsert,
+  useMutableValue
+} from '../../../../utils';
 import {
   useCommonValuesContext,
   useCustomHandleContext
@@ -24,7 +28,7 @@ import { createGridStrategy } from './common';
 function useInactiveIndexToKey() {
   const { activeItemKey, indexToKey } = useCommonValuesContext();
   const { fixedItemKeys } = useCustomHandleContext() ?? {};
-  const result = useSharedValue<Array<string>>(EMPTY_ARRAY);
+  const result = useMutableValue<Array<string>>(EMPTY_ARRAY);
 
   useAnimatedReaction(
     () => ({

packages/react-native-sortables/src/providers/layout/grid/updates/swap.ts

@@ -1,7 +1,11 @@
-import { useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
+import { useAnimatedReaction } from 'react-native-reanimated';
 
 import { EMPTY_ARRAY } from '../../../../constants';
-import { areArraysDifferent, reorderSwap } from '../../../../utils';
+import {
+  areArraysDifferent,
+  reorderSwap,
+  useMutableValue
+} from '../../../../utils';
 import { useCommonValuesContext } from '../../../shared';
 import { useGridLayoutContext } from '../GridLayoutProvider';
 import { getMainIndex } from '../utils';
@@ -26,7 +30,7 @@ import { createGridStrategy } from './common';
 function useInactiveIndexToKey() {
   const { activeItemKey, indexToKey, keyToIndex } = useCommonValuesContext();
   const { numGroups } = useGridLayoutContext();
-  const result = useSharedValue<Array<string>>(EMPTY_ARRAY);
+  const result = useMutableValue<Array<string>>(EMPTY_ARRAY);
 
   useAnimatedReaction(
     () => ({

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

@@ -1,12 +1,12 @@
 import type { ReactNode } from 'react';
-import { useSharedValue } from 'react-native-reanimated';
 
 import type {
   ActiveItemValuesContextType,
   Dimensions,
   Vector
 } from '../../types';
 import { DragActivationState } from '../../types';
+import { useMutableValue } from '../../utils';
 import { createProvider } from '../utils';
 
 type ActiveItemValuesProviderProps = {
@@ -17,19 +17,19 @@ const { ActiveItemValuesProvider, useActiveItemValuesContext } = createProvider(
   'ActiveItemValues'
 )<ActiveItemValuesProviderProps, ActiveItemValuesContextType>(() => {
   // POSITIONS
-  const touchPosition = useSharedValue<null | Vector>(null);
-  const activeItemPosition = useSharedValue<null | Vector>(null);
+  const touchPosition = useMutableValue<null | Vector>(null);
+  const activeItemPosition = useMutableValue<null | Vector>(null);
 
   // DIMENSIONS
-  const activeItemDimensions = useSharedValue<Dimensions | null>(null);
+  const activeItemDimensions = useMutableValue<Dimensions | null>(null);
 
   // DRAG STATE
-  const activeItemKey = useSharedValue<null | string>(null);
-  const prevActiveItemKey = useSharedValue<null | string>(null);
-  const activationState = useSharedValue(DragActivationState.INACTIVE);
-  const activeAnimationProgress = useSharedValue(0);
-  const inactiveAnimationProgress = useSharedValue(0);
-  const activeItemDropped = useSharedValue(true);
+  const activeItemKey = useMutableValue<null | string>(null);
+  const prevActiveItemKey = useMutableValue<null | string>(null);
+  const activationState = useMutableValue(DragActivationState.INACTIVE);
+  const activeAnimationProgress = useMutableValue(0);
+  const inactiveAnimationProgress = useMutableValue(0);
+  const activeItemDropped = useMutableValue(true);
 
   return {
     value: {