Skip to content

Commit

Permalink
perf: improve performance of useSelector by moving to shallowRef
Browse files Browse the repository at this point in the history
  • Loading branch information
crutchcorn committed Dec 20, 2024
1 parent 51f5381 commit 0aee19f
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions packages/vue-redux/src/compositions/use-selector.ts
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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 }
Expand All @@ -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,
Expand All @@ -104,7 +104,7 @@ export function createSelectorComposition(
return
}

selectedState.value = data as UnwrapRef<Selected>
selectedState.value = data
})

onCleanup(() => {
Expand All @@ -116,7 +116,7 @@ export function createSelectorComposition(
},
)

return readonly(selectedState)
return shallowReadonly(selectedState)
}

Object.assign(useSelector, {
Expand Down

0 comments on commit 0aee19f

Please sign in to comment.