ObjectTree: Memoize ObjectList

client/src/components/Tree/ObjectTree.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
 import { fetcher } from '../../http/axiosInstance'
 import { BASE_URL } from '../../constants'
@@ -118,15 +118,25 @@ const ObjectList = ({
         }
     )
 
+    const navLinks = useMemo(() => (
+        Array.isArray(data) ? data.map((type) => (
+            <NavLink key={type.object_id} label={type.caption ? type.caption : 'Без названия'} p={0} onClick={() => setCurrentObjectId(map_id, type.object_id)} />
+        )) : null
+    ), [data, map_id]);
+
     return (
-        <NavLink onClick={() => {
-            setSelectedObjectType(map_id, id)
-        }} rightSection={<IconChevronDown size={14} />} p={0} label={`${label} ${count ? `(${count})` : ''}`}>
-            {Array.isArray(data) && data.map((type) => (
-                <NavLink key={type.object_id} label={type.caption ? type.caption : 'Без названия'} p={0} onClick={() => setCurrentObjectId(map_id, type.object_id)} />
-            ))}
+        <NavLink onClick={() => setSelectedObjectType(map_id, id)} rightSection={<IconChevronDown size={14} />} p={0} label={`${label} ${count ? `(${count})` : ''}`}>
+            {navLinks}
         </NavLink>
-    )
+    );
+
+    // return (
+    //     <NavLink onClick={() => { setSelectedObjectType(map_id, id) }} rightSection={<IconChevronDown size={14} />} p={0} label={`${label} ${count ? `(${count})` : ''}`}>
+    //         {Array.isArray(data) && data.map((type) => (
+    //             <NavLink key={type.object_id} label={type.caption ? type.caption : 'Без названия'} p={0} onClick={() => setCurrentObjectId(map_id, type.object_id)} />
+    //         ))}
+    //     </NavLink>
+    // )
 }
 
 export default ObjectTree