From 0aee19f3cd2d3755e7a84f03d8098daeaee08c2d Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Fri, 20 Dec 2024 10:49:27 -0800
Subject: [PATCH] perf: improve performance of useSelector by moving to
 shallowRef

---
 .../vue-redux/src/compositions/use-selector.ts     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/vue-redux/src/compositions/use-selector.ts b/packages/vue-redux/src/compositions/use-selector.ts
index 74fb91d..cf2975c 100644
--- a/packages/vue-redux/src/compositions/use-selector.ts
+++ b/packages/vue-redux/src/compositions/use-selector.ts
@@ -1,10 +1,10 @@
-import { readonly, ref, toRaw, watch } from 'vue'
+import { shallowReadonly, shallowRef, toRaw, watch } from 'vue'
 import { ContextKey } from '../provider/context'
 import {
   createReduxContextComposition,
   useReduxContext as useDefaultReduxContext,
 } from './use-redux-context'
-import type { DeepReadonly, InjectionKey, Ref, UnwrapRef } from 'vue'
+import type { InjectionKey, ShallowRef } from 'vue'
 import type { EqualityFn } from '../types'
 import type { VueReduxContextValue } from '../provider/context'
 
@@ -41,7 +41,7 @@ export interface UseSelector<StateType = unknown> {
   <TState extends StateType = StateType, Selected = unknown>(
     selector: (state: TState) => Selected,
     equalityFnOrOptions?: EqualityFn<Selected> | UseSelectorOptions<Selected>,
-  ): Readonly<Ref<DeepReadonly<UnwrapRef<Selected>>>>
+  ): Readonly<ShallowRef<Selected>>
 
   /**
    * Creates a "pre-typed" version of {@linkcode useSelector useSelector}
@@ -83,7 +83,7 @@ export function createSelectorComposition(
     equalityFnOrOptions:
       | EqualityFn<Selected>
       | UseSelectorOptions<Selected> = {},
-  ): Readonly<Ref<DeepReadonly<UnwrapRef<Selected>>>> => {
+  ): Readonly<ShallowRef<Selected>> => {
     const { equalityFn = refEquality } =
       typeof equalityFnOrOptions === 'function'
         ? { equalityFn: equalityFnOrOptions }
@@ -93,7 +93,7 @@ export function createSelectorComposition(
 
     // TODO: Introduce wrappedSelector for debuggability
 
-    const selectedState = ref(selector(store.getState() as TState))
+    const selectedState = shallowRef(selector(store.getState() as TState))
 
     watch(
       () => store,
@@ -104,7 +104,7 @@ export function createSelectorComposition(
             return
           }
 
-          selectedState.value = data as UnwrapRef<Selected>
+          selectedState.value = data
         })
 
         onCleanup(() => {
@@ -116,7 +116,7 @@ export function createSelectorComposition(
       },
     )
 
-    return readonly(selectedState)
+    return shallowReadonly(selectedState)
   }
 
   Object.assign(useSelector, {