Avoid using svelte/store's get in useSelector (#3603)

* Avoid using svelte store get in useSelector. * Add changeset. * Reorder assigning the local variable and calling `set` with that value * Tweak changeset Co-authored-by: Mateusz Burzyński <[email protected]>
statelyai · Nov 14, 2022 · 44719c2 · 44719c2
1 parent 5e0808e
commit 44719c2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/.changeset/afraid-kids-happen.md b/.changeset/afraid-kids-happen.md
@@ -0,0 +1,5 @@
+---
+'@xstate/svelte': patch
+---
+
+Improve performance of the `useSelector` by avoiding `get`
diff --git a/packages/xstate-svelte/src/useSelector.ts b/packages/xstate-svelte/src/useSelector.ts
@@ -1,4 +1,4 @@
-import { get, readable } from 'svelte/store';
+import { readable } from 'svelte/store';
 import type { ActorRef, Subscribable, Subscription } from 'xstate';
 
 const defaultCompare = (a, b) => a === b;
@@ -13,10 +13,14 @@ export const useSelector = <
   compare: (a: T, b: T) => boolean = defaultCompare
 ) => {
   let sub: Subscription;
-  const selected = readable(selector(actor.getSnapshot()), (set) => {
+
+  let prevSelected = selector(actor.getSnapshot());
+
+  const selected = readable(prevSelected, (set) => {
     sub = actor.subscribe((state) => {
       const nextSelected = selector(state);
-      if (!compare(get(selected), nextSelected)) {
+      if (!compare(prevSelected, nextSelected)) {
+        prevSelected = nextSelected;
         set(nextSelected);
       }
     });