Refactor layout tabs to prevent unnecessary re-renders

packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout-client.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { PropsWithChildren } from 'react';
 import { Layout, Tabs, Badge, Button, Popconfirm, Flex } from 'antd';
 import { DeleteOutlined } from '@ant-design/icons';
@@ -21,80 +21,109 @@ interface ListLayoutClientProps {
   boardDetails: BoardDetails;
 }
 
-const TabsWrapper: React.FC<{ boardDetails: BoardDetails }> = ({ boardDetails }) => {
+// Queue tab label - subscribes to queue context for badge count
+const QueueTabLabel = React.memo(() => {
+  const { queue } = useQueueContext();
+  return (
+    <Badge
+      count={queue.length}
+      overflowCount={99}
+      showZero={false}
+      size="small"
+      color="cyan"
+      offset={[8, -2]}
+    >
+      Queue
+    </Badge>
+  );
+});
+QueueTabLabel.displayName = 'QueueTabLabel';
+
+// Queue tab content - handles queue display and clear functionality
+const QueueTabContent = React.memo(({ boardDetails }: { boardDetails: BoardDetails }) => {
   const { queue, setQueue } = useQueueContext();
 
-  const handleClearQueue = () => {
+  const handleClearQueue = useCallback(() => {
+    const itemsCleared = queue.length;
     setQueue([]);
     track('Queue Cleared', {
       boardLayout: boardDetails.layout_name || '',
-      itemsCleared: queue.length,
+      itemsCleared,
     });
-  };
+  }, [setQueue, boardDetails.layout_name, queue.length]);
 
-  const tabItems = [
-    {
-      key: 'queue',
-      label: (
-        <Badge
-          count={queue.length}
-          overflowCount={99}
-          showZero={false}
-          size="small"
-          color="cyan"
-          offset={[8, -2]}
-        >
-          Queue
-        </Badge>
-      ),
-      children: (
-        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-          {queue.length > 0 && (
-            <Flex justify="flex-end" style={{ padding: '8px 8px 0 8px' }}>
-              <Popconfirm
-                title="Clear queue"
-                description="Are you sure you want to clear all items from the queue?"
-                onConfirm={handleClearQueue}
-                okText="Clear"
-                cancelText="Cancel"
-              >
-                <Button type="text" icon={<DeleteOutlined />} size="small" style={{ color: themeTokens.neutral[400] }}>
-                  Clear
-                </Button>
-              </Popconfirm>
-            </Flex>
-          )}
-          <div style={{ flex: 1, overflow: 'auto' }}>
-            <QueueList boardDetails={boardDetails} />
-          </div>
-        </div>
-      ),
-    },
-    {
-      key: 'search',
-      label: 'Search',
-      children: (
-        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-          <div style={{ flex: 1, overflow: 'auto' }}>
-            <BasicSearchForm boardDetails={boardDetails} />
-          </div>
-          <SearchResultsFooter />
-        </div>
-      ),
-    },
-    {
-      key: 'holds',
-      label: 'Search by Hold',
-      children: (
-        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-          <div style={{ flex: 1, overflow: 'auto' }}>
-            <ClimbHoldSearchForm boardDetails={boardDetails} />
-          </div>
-          <SearchResultsFooter />
-        </div>
-      ),
-    },
-  ];
+  return (
+    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      {queue.length > 0 && (
+        <Flex justify="flex-end" style={{ padding: '8px 8px 0 8px' }}>
+          <Popconfirm
+            title="Clear queue"
+            description="Are you sure you want to clear all items from the queue?"
+            onConfirm={handleClearQueue}
+            okText="Clear"
+            cancelText="Cancel"
+          >
+            <Button type="text" icon={<DeleteOutlined />} size="small" style={{ color: themeTokens.neutral[400] }}>
+              Clear
+            </Button>
+          </Popconfirm>
+        </Flex>
+      )}
+      <div style={{ flex: 1, overflow: 'auto' }}>
+        <QueueList boardDetails={boardDetails} />
+      </div>
+    </div>
+  );
+});
+QueueTabContent.displayName = 'QueueTabContent';
+
+// Search tab content
+const SearchTabContent = React.memo(({ boardDetails }: { boardDetails: BoardDetails }) => (
+  <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <div style={{ flex: 1, overflow: 'auto' }}>
+      <BasicSearchForm boardDetails={boardDetails} />
+    </div>
+    <SearchResultsFooter />
+  </div>
+));
+SearchTabContent.displayName = 'SearchTabContent';
+
+// Holds search tab content
+const HoldsTabContent = React.memo(({ boardDetails }: { boardDetails: BoardDetails }) => (
+  <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+    <div style={{ flex: 1, overflow: 'auto' }}>
+      <ClimbHoldSearchForm boardDetails={boardDetails} />
+    </div>
+    <SearchResultsFooter />
+  </div>
+));
+HoldsTabContent.displayName = 'HoldsTabContent';
+
+// TabsWrapper - no longer subscribes to queue context directly
+// Child components handle their own queue subscriptions
+const TabsWrapper: React.FC<{ boardDetails: BoardDetails }> = ({ boardDetails }) => {
+  // Memoize tabItems to prevent infinite re-render loop
+  // Each tab's children are memoized components that manage their own state
+  const tabItems = useMemo(
+    () => [
+      {
+        key: 'queue',
+        label: <QueueTabLabel />,
+        children: <QueueTabContent boardDetails={boardDetails} />,
+      },
+      {
+        key: 'search',
+        label: 'Search',
+        children: <SearchTabContent boardDetails={boardDetails} />,
+      },
+      {
+        key: 'holds',
+        label: 'Search by Hold',
+        children: <HoldsTabContent boardDetails={boardDetails} />,
+      },
+    ],
+    [boardDetails],
+  );
 
   return <Tabs defaultActiveKey="queue" items={tabItems} className={styles.siderTabs} />;
 };