🚧 tried to memo proxy resource table, failed

src/components/ProxyResourcesTable.tsx

@@ -118,6 +118,11 @@ type ProxyResourcesTableProps = {
     initialFilterSite?: Selectedsite | null;
 };
 
+const booleanSearchFilterSchema = z
+    .enum(["true", "false"])
+    .optional()
+    .catch(undefined);
+
 export default function ProxyResourcesTable({
     resources,
     orgId,
@@ -224,7 +229,30 @@ export default function ProxyResourcesTable({
         }
     }
 
-    const proxyColumns: ExtendedColumnDef<ResourceRow>[] = [
+    const clearSiteFilter = () => {
+        handleFilterChange("siteId", undefined);
+        setSiteFilterOpen(false);
+    };
+
+    const onPickSite = (site: Selectedsite) => {
+        handleFilterChange("siteId", String(site.siteId));
+        setSiteFilterOpen(false);
+    };
+
+    const siteFilterOpenRef = useRef(siteFilterOpen);
+    siteFilterOpenRef.current = siteFilterOpen;
+
+    const selectedSiteRef = useRef(selectedSite);
+    selectedSiteRef.current = selectedSite;
+
+    const clearSiteFilterRef = useRef(clearSiteFilter);
+    clearSiteFilterRef.current = clearSiteFilter;
+
+    const onPickSiteRef = useRef(onPickSite);
+    onPickSiteRef.current = onPickSite;
+
+    const proxyColumns = useMemo<ExtendedColumnDef<ResourceRow>[]>(() => {
+        const cols: ExtendedColumnDef<ResourceRow>[] = [
             {
                 accessorKey: "name",
                 enableHiding: false,
@@ -262,10 +290,14 @@ export default function ProxyResourcesTable({
             },
             {
                 id: "sites",
-            accessorFn: (row) => row.sites.map((s) => s.siteName).join(", "),
+                accessorFn: (row) =>
+                    row.sites.map((s) => s.siteName).join(", "),
                 friendlyName: t("sites"),
                 header: () => (
-                <Popover open={siteFilterOpen} onOpenChange={setSiteFilterOpen}>
+                    <Popover
+                        open={siteFilterOpenRef.current}
+                        onOpenChange={setSiteFilterOpen}
+                    >
                         <PopoverTrigger asChild>
                             <Button
                                 type="button"
@@ -273,18 +305,19 @@ export default function ProxyResourcesTable({
                                 role="combobox"
                                 className={cn(
                                     "justify-between text-sm h-8 px-2 w-full p-3",
-                                !selectedSite && "text-muted-foreground"
+                                    !selectedSiteRef.current &&
+                                        "text-muted-foreground"
                                 )}
                             >
                                 <div className="flex items-center gap-2 min-w-0">
                                     {t("sites")}
                                     <Funnel className="size-4 flex-none" />
-                                {selectedSite && (
+                                    {selectedSiteRef.current && (
                                         <Badge
                                             className="truncate max-w-[10rem]"
                                             variant="secondary"
                                         >
-                                        {selectedSite.name}
+                                            {selectedSiteRef.current.name}
                                         </Badge>
                                     )}
                                 </div>
@@ -300,15 +333,17 @@ export default function ProxyResourcesTable({
                                     variant="ghost"
                                     size="sm"
                                     className="h-8 w-full justify-start font-normal"
-                                onClick={clearSiteFilter}
+                                    onClick={() => clearSiteFilterRef.current()}
                                 >
                                     {t("standaloneHcFilterAnySite")}
                                 </Button>
                             </div>
                             <SitesSelector
                                 orgId={orgId}
-                            selectedSite={selectedSite}
+                                selectedSite={selectedSiteRef.current}
-                            onSelectSite={onPickSite}
+                                onSelectSite={(site) =>
+                                    onPickSiteRef.current(site)
+                                }
                             />
                         </PopoverContent>
                     </Popover>
@@ -345,7 +380,10 @@ export default function ProxyResourcesTable({
                 header: () => (
                     <ColumnFilterButton
                         options={[
-                        { value: "healthy", label: t("resourcesTableHealthy") },
+                            {
+                                value: "healthy",
+                                label: t("resourcesTableHealthy")
+                            },
                             {
                                 value: "degraded",
                                 label: t("resourcesTableDegraded")
@@ -354,7 +392,10 @@ export default function ProxyResourcesTable({
                                 value: "unhealthy",
                                 label: t("resourcesTableUnhealthy")
                             },
-                        { value: "unknown", label: t("resourcesTableUnknown") }
+                            {
+                                value: "unknown",
+                                label: t("resourcesTableUnknown")
+                            }
                         ]}
                         selectedValue={
                             searchParams.get("healthStatus") ?? undefined
@@ -398,7 +439,9 @@ export default function ProxyResourcesTable({
                 header: () => <span className="p-3">{t("uptime30d")}</span>,
                 cell: ({ row }) => {
                     const resourceRow = row.original;
-                return <UptimeMiniBar resourceId={resourceRow.id} days={30} />;
+                    return (
+                        <UptimeMiniBar resourceId={resourceRow.id} days={30} />
+                    );
                 }
             },
             {
@@ -412,7 +455,9 @@ export default function ProxyResourcesTable({
                         return (
                             <div className="flex items-center gap-2 min-w-0">
                                 <CopyToClipboard
-                                text={resourceRow.proxyPort?.toString() || ""}
+                                    text={
+                                        resourceRow.proxyPort?.toString() || ""
+                                    }
                                     isLink={false}
                                 />
                             </div>
@@ -468,10 +513,15 @@ export default function ProxyResourcesTable({
                     <ColumnFilterButton
                         options={[
                             { value: "protected", label: t("protected") },
-                        { value: "not_protected", label: t("notProtected") },
+                            {
+                                value: "not_protected",
+                                label: t("notProtected")
+                            },
                             { value: "none", label: t("none") }
                         ]}
-                    selectedValue={searchParams.get("authState") ?? undefined}
+                        selectedValue={
+                            searchParams.get("authState") ?? undefined
+                        }
                         onValueChange={(value) =>
                             handleFilterChange("authState", value)
                         }
@@ -530,27 +580,6 @@ export default function ProxyResourcesTable({
                     />
                 )
             },
-        ...(isLabelFeatureEnabled
-            ? [
-                  {
-                      id: "labels",
-                      accessorKey: "labels",
-                      header: () => (
-                          <span className="p-3 text-end w-full inline-block">
-                              {t("labels")}
-                          </span>
-                      ),
-                      cell: ({ row }: { row: { original: ResourceRow } }) => {
-                          return (
-                              <ResourceLabelCell
-                                  resource={row.original}
-                                  orgId={orgId}
-                              />
-                          );
-                      }
-                  }
-              ]
-            : []),
             {
                 id: "actions",
                 enableHiding: false,
@@ -561,7 +590,10 @@ export default function ProxyResourcesTable({
                         <div className="flex items-center gap-2 justify-end">
                             <DropdownMenu>
                                 <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" className="h-8 w-8 p-0">
+                                    <Button
+                                        variant="ghost"
+                                        className="h-8 w-8 p-0"
+                                    >
                                         <span className="sr-only">
                                             {t("openMenu")}
                                         </span>
@@ -603,10 +635,23 @@ export default function ProxyResourcesTable({
             }
         ];
 
-    const booleanSearchFilterSchema = z
+        if (isLabelFeatureEnabled) {
-        .enum(["true", "false"])
+            cols.splice(cols.length - 1, 0, {
-        .optional()
+                id: "labels",
-        .catch(undefined);
+                accessorKey: "labels",
+                header: () => (
+                    <span className="p-3 text-end w-full inline-block">
+                        {t("labels")}
+                    </span>
+                ),
+                cell: ({ row }: { row: { original: ResourceRow } }) => (
+                    <ResourceLabelCell resource={row.original} orgId={orgId} />
+                )
+            });
+        }
+
+        return cols;
+    }, [isLabelFeatureEnabled, orgId, t, searchParams]);
 
     function handleFilterChange(
         column: string,
@@ -623,16 +668,6 @@ export default function ProxyResourcesTable({
         });
     }
 
-    const clearSiteFilter = () => {
-        handleFilterChange("siteId", undefined);
-        setSiteFilterOpen(false);
-    };
-
-    const onPickSite = (site: Selectedsite) => {
-        handleFilterChange("siteId", String(site.siteId));
-        setSiteFilterOpen(false);
-    };
-
     function toggleSort(column: string) {
         const newSearch = getNextSortOrder(column, searchParams);