From 5a32a5151a3da637a3e5316eb8d2d90a6bb503ab Mon Sep 17 00:00:00 2001
From: Damien <admin@ddelay.co.uk>
Date: Wed, 7 Jan 2026 20:24:51 +0000
Subject: [PATCH] Second Thought.. We should useMemo same as we do for the
 other data to prevent unnecessary compute.

---
 frontend/src/components/tables/UsersTable.jsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/tables/UsersTable.jsx b/frontend/src/components/tables/UsersTable.jsx
index bd4f17f6..eecb8fc5 100644
--- a/frontend/src/components/tables/UsersTable.jsx
+++ b/frontend/src/components/tables/UsersTable.jsx
@@ -141,6 +141,15 @@ const UsersTable = () => {
   /**
    * useMemo
    */
+  // Create a profile ID to name lookup map for efficient rendering
+  const profileIdToName = useMemo(() => {
+    const map = {};
+    Object.values(profiles).forEach((profile) => {
+      map[profile.id] = profile.name;
+    });
+    return map;
+  }, [profiles]);
+
   const columns = useMemo(
     () => [
       {
@@ -268,9 +277,9 @@ const UsersTable = () => {
         grow: true,
         cell: ({ getValue }) => {
           const userProfiles = getValue() || [];
-          const profileNames = Object.values(profiles)
-            .filter((profile) => userProfiles.includes(profile.id))
-            .map((profile) => profile.name);
+          const profileNames = userProfiles
+            .map((id) => profileIdToName[id])
+            .filter(Boolean); // Filter out any undefined values
           return (
             <Group gap={4} wrap="wrap" py={4}>
               {profileNames.length > 0 ? (
@@ -308,7 +317,7 @@ const UsersTable = () => {
         ),
       },
     ],
-    [theme, editUser, deleteUser, visiblePasswords, togglePasswordVisibility]
+    [theme, editUser, deleteUser, visiblePasswords, togglePasswordVisibility, profileIdToName]
   );
 
   const closeUserForm = () => {