perf: Replace useSharedValue with useMutableValue

[MatiPl01]

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.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
react-native-sortables-docs	⬜️ Ignored (Inspect)	Visit Preview		Jun 21, 2025 3:36pm

[Copilot]

Pull Request Overview

This PR refactors various components and hooks to replace the use of useSharedValue with a custom useMutableValue hook for lazy initialization and improved performance.

• Introduce useMutableValue for lazy creation of reanimated mutable values
• Update useAnimatedDebounce and other hooks/providers to use useMutableValue
• Remove all useSharedValue imports and replace with the new hook

Reviewed Changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated no comments.

File	Description
packages/react-native-sortables/src/utils/reanimated/useMutableValue.ts	Adds useMutableValue with lazy initialization
packages/react-native-sortables/src/utils/reanimated/useAnimatedDebounce.ts	Switches from useSharedValue to useMutableValue
All provider, layout, hook, and component files	Replace useSharedValue imports/usage

Comments suppressed due to low confidence (2)

packages/react-native-sortables/src/utils/reanimated/useMutableValue.ts:1

• [nitpick] Consider adding a JSDoc comment above useMutableValue to explain its purpose, parameters, and return value, improving maintainability and discoverability.

import { useState } from 'react';

packages/react-native-sortables/src/utils/reanimated/useMutableValue.ts:1

• Add unit tests for useMutableValue to verify that the mutable value is initialized only once and that updates to .value persist across renders.

import { useState } from 'react';

[MatiPl01]

🎉 This issue has been resolved in version 1.8.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀