From 1a438c630e77afc3d227a19280e14db2d70eecef Mon Sep 17 00:00:00 2001
From: Brendan Allan <brendonovich@outlook.com>
Date: Fri, 19 Apr 2024 11:30:39 +0800
Subject: [PATCH] Memoise useExplorerPreference props (#2363)

* memoise useExplorerPreference props

* this is even faster

---------

Co-authored-by: Utku Bakir <74243531+utkubakir@users.noreply.github.com>
---
 interface/app/$libraryId/location/$id.tsx | 18 ++++++++++++------
 interface/app/$libraryId/tag/$id.tsx      | 12 +++++++++---
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/interface/app/$libraryId/location/$id.tsx b/interface/app/$libraryId/location/$id.tsx
index 520ab8c89..68b84e780 100644
--- a/interface/app/$libraryId/location/$id.tsx
+++ b/interface/app/$libraryId/location/$id.tsx
@@ -1,5 +1,5 @@
 import { ArrowClockwise, Info } from '@phosphor-icons/react';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { stringify } from 'uuid';
 import {
 	arraysEqual,
@@ -226,11 +226,17 @@ function getLastSectionOfPath(path: string): string | undefined {
 function useLocationExplorerSettings(location: Location) {
 	const preferences = useExplorerPreferences({
 		data: location,
-		createDefaultSettings: () =>
-			createDefaultExplorerSettings<FilePathOrder>({
-				order: { field: 'name', value: 'Asc' }
-			}),
-		getSettings: (prefs) => prefs.location?.[stringify(location.pub_id)]?.explorer,
+		createDefaultSettings: useCallback(
+			() =>
+				createDefaultExplorerSettings<FilePathOrder>({
+					order: { field: 'name', value: 'Asc' }
+				}),
+			[]
+		),
+		getSettings: useCallback(
+			(prefs) => prefs.location?.[stringify(location.pub_id)]?.explorer,
+			[location.pub_id]
+		),
 		writeSettings: (settings) => ({
 			location: { [stringify(location.pub_id)]: { explorer: settings } }
 		})
diff --git a/interface/app/$libraryId/tag/$id.tsx b/interface/app/$libraryId/tag/$id.tsx
index 3202376e0..31c6ad6d7 100644
--- a/interface/app/$libraryId/tag/$id.tsx
+++ b/interface/app/$libraryId/tag/$id.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { ObjectOrder, Tag, useCache, useLibraryQuery, useNodes } from '@sd/client';
 import { LocationIdParamsSchema } from '~/app/route-schemas';
 import { Icon } from '~/components';
@@ -91,8 +91,14 @@ export function Component() {
 function useTagExplorerSettings(tag: Tag) {
 	const preferences = useExplorerPreferences({
 		data: tag,
-		createDefaultSettings: () => createDefaultExplorerSettings<ObjectOrder>({ order: null }),
-		getSettings: (prefs) => prefs.tag?.[stringify(tag.pub_id)]?.explorer,
+		createDefaultSettings: useCallback(
+			() => createDefaultExplorerSettings<ObjectOrder>({ order: null }),
+			[]
+		),
+		getSettings: useCallback(
+			(prefs) => prefs.tag?.[stringify(tag.pub_id)]?.explorer,
+			[tag.pub_id]
+		),
 		writeSettings: (settings) => ({
 			tag: { [stringify(tag.pub_id)]: { explorer: settings } }
 		})