refactor: connection components

src/components/connection/connection-table.tsx

@@ -6,8 +6,8 @@ import {
 } from "@mui/x-data-grid";
 import dayjs from "dayjs";
 import { useLocalStorage } from "foxact/use-local-storage";
-import { t } from "i18next";
 import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import parseTraffic from "@/utils/parse-traffic";
 import { truncateStr } from "@/utils/truncate-str";
@@ -19,6 +19,7 @@ interface Props {
 
 export const ConnectionTable = (props: Props) => {
   const { connections, onShowDetail } = props;
+  const { t } = useTranslation();
   const apiRef = useGridApiRef();
   useEffect(() => {
     const PATCH_FLAG_KEY = "__clashPatchedPublishEvent" as const;
@@ -152,7 +153,8 @@ export const ConnectionTable = (props: Props) => {
     {},
   );
 
-  const [columns] = useState<GridColDef[]>([
+  const columns = useMemo<GridColDef[]>(() => {
+    return [
       {
         field: "host",
         headerName: t("Host"),
@@ -238,7 +240,8 @@ export const ConnectionTable = (props: Props) => {
         width: columnWidths["type"] || 160,
         minWidth: 100,
       },
-  ]);
+    ];
+  }, [columnWidths, t]);
 
   const handleColumnResize = (params: GridColumnResizeParams) => {
     const { colDef, width } = params;