chore: array comparison perf improvements (#229)

huntabyte · Jan 9, 2024 · f0983e4 · f0983e4
1 parent 42979dd
commit f0983e4
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 4 deletions.
diff --git a/.changeset/purple-items-complain.md b/.changeset/purple-items-complain.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+chore: array comparison perf improvements
diff --git a/src/lib/bits/accordion/components/accordion.svelte b/src/lib/bits/accordion/components/accordion.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { arraysAreEqual } from "$lib/internal/arrays.js";
+
 	import { melt } from "@melt-ui/svelte";
 	import type { Props } from "../types.js";
 	import { setCtx } from "../ctx.js";
@@ -24,9 +26,10 @@
 		defaultValue: value,
 		onValueChange: (({ next }: { next: $$Props["value"] }) => {
 			if (Array.isArray(next)) {
-				if (JSON.stringify(next) !== JSON.stringify(value)) {
+				if (!Array.isArray(value) || !arraysAreEqual(value, next)) {
 					onValueChange?.(next);
 					value = next;
+					return next;
 				}
 				return next;
 			}

diff --git a/src/lib/bits/calendar/components/calendar.svelte b/src/lib/bits/calendar/components/calendar.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { arraysAreEqual } from "$lib/internal/arrays.js";
+
 	import type { DateValue } from "@internationalized/date";
 
 	import { handleCalendarInitialFocus } from "$lib/internal/focus.js";
@@ -78,9 +80,10 @@
 		},
 		onValueChange: ({ next }: { next: $$Props["value"] }) => {
 			if (Array.isArray(next)) {
-				if (JSON.stringify(next) !== JSON.stringify(value)) {
+				if (!Array.isArray(value) || !arraysAreEqual(value, next)) {
 					onValueChange?.(next);
 					value = next;
+					return next;
 				}
 				return next;
 			}

diff --git a/src/lib/bits/select/components/select.svelte b/src/lib/bits/select/components/select.svelte
@@ -4,6 +4,8 @@
 </script>
 
 <script lang="ts" generics="T, Multiple extends boolean = false">
+	import { arraysAreEqual } from "$lib/internal/arrays.js";
+
 	import { derived } from "svelte/store";
 	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
@@ -49,9 +51,10 @@
 		defaultOpen: open,
 		onSelectedChange: (({ next }: { next: $$Props["selected"] }) => {
 			if (Array.isArray(next)) {
-				if (JSON.stringify(next) !== JSON.stringify(selected)) {
+				if (!Array.isArray(selected) || !arraysAreEqual(selected, next)) {
 					onSelectedChange?.(next);
 					selected = next;
+					return next;
 				}
 				return next;
 			}

diff --git a/src/lib/bits/toggle-group/components/toggle-group.svelte b/src/lib/bits/toggle-group/components/toggle-group.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { arraysAreEqual } from "$lib/internal/arrays.js";
+
 	import { melt } from "@melt-ui/svelte";
 	import { setCtx } from "../ctx.js";
 	import type { Props } from "../types.js";
@@ -28,9 +30,10 @@
 		orientation,
 		onValueChange: (({ next }: { next: $$Props["value"] }) => {
 			if (Array.isArray(next)) {
-				if (JSON.stringify(next) !== JSON.stringify(value)) {
+				if (!Array.isArray(value) || !arraysAreEqual(value, next)) {
 					onValueChange?.(next);
 					value = next;
+					return next;
 				}
 				return next;
 			}

diff --git a/src/lib/internal/arrays.ts b/src/lib/internal/arrays.ts
@@ -0,0 +1,7 @@
+export function arraysAreEqual<T extends Array<unknown>>(arr1: T, arr2: T): boolean {
+	if (arr1.length !== arr2.length) {
+		return false;
+	}
+
+	return arr1.every((value, index) => value === arr2[index]);
+}