From 54eb674e7f66ddd0733625701b9b0ad81fd97645 Mon Sep 17 00:00:00 2001
From: qu1ck <anlutsenko@gmail.com>
Date: Mon, 17 Jul 2023 05:36:14 -0700
Subject: [PATCH] Refactor ServerData as context, optimize some unnecessary
 renders

---
 src/components/details.tsx             | 64 ++++++++++++++------------
 src/components/filters.tsx             | 10 ++--
 src/components/modals/add.tsx          | 58 ++++++++++-------------
 src/components/modals/common.tsx       | 20 ++++----
 src/components/modals/editlabels.tsx   | 20 ++++----
 src/components/modals/edittorrent.tsx  |  9 ++--
 src/components/modals/move.tsx         | 18 ++++----
 src/components/modals/remove.tsx       | 12 +++--
 src/components/modals/servermodals.tsx |  8 ----
 src/components/server.tsx              | 28 ++++++-----
 src/components/tables/torrenttable.tsx | 29 ++++++------
 src/components/toolbar.tsx             | 12 ++---
 src/rpc/torrent.ts                     | 30 +++++-------
 13 files changed, 155 insertions(+), 163 deletions(-)

diff --git a/src/components/details.tsx b/src/components/details.tsx
index 9a558b6..24e2476 100644
--- a/src/components/details.tsx
+++ b/src/components/details.tsx
@@ -371,6 +371,39 @@ function ServerStats() {
     );
 }
 
+const DetailsPanels = React.memo(function DetailsPanels({ torrent }: { torrent: Torrent | undefined }) {
+    return (<>
+        <Tabs.Panel value="general" h="100%">
+            {torrent !== undefined
+                ? <GeneralPane torrent={torrent} />
+                : <></>}
+        </Tabs.Panel>
+        <Tabs.Panel value="files" h="100%">
+            {torrent !== undefined
+                ? <FileTreePane torrent={torrent} />
+                : <></>}
+        </Tabs.Panel>
+        <Tabs.Panel value="pieces" h="100%">
+            {torrent !== undefined
+                ? <PiecesCanvas torrent={torrent} />
+                : <></>}
+        </Tabs.Panel>
+        <Tabs.Panel value="peers" h="100%">
+            {torrent !== undefined
+                ? <PeersTable torrent={torrent} />
+                : <></>}
+        </Tabs.Panel>
+        <Tabs.Panel value="trackers" h="100%">
+            {torrent !== undefined
+                ? <TrackersTable torrent={torrent} />
+                : <></>}
+        </Tabs.Panel>
+        <Tabs.Panel value="serverstats" h="100%">
+            <ServerStats />
+        </Tabs.Panel>
+    </>);
+});
+
 function Details(props: DetailsProps) {
     const config = useContext(ConfigContext);
     const peersTableVisibility = config.getTableColumnVisibility("peers");
@@ -388,7 +421,7 @@ function Details(props: DetailsProps) {
 
     return (
         <Tabs variant="outline" defaultValue="general" keepMounted={false}
-            h="100%" w="100%" style={{ display: "flex", flexDirection: "column" }}>
+            h="100%" w="100%" sx={{ display: "flex", flexDirection: "column" }}>
             <Tabs.List px="sm" pt="xs">
                 <Tabs.Tab value="general" disabled={torrent === undefined}>
                     <Group>
@@ -432,34 +465,7 @@ function Details(props: DetailsProps) {
                     visible={props.torrentId !== undefined && isLoading} transitionDuration={500}
                     loaderProps={{ size: "xl" }}
                     overlayOpacity={0.35} />
-                <Tabs.Panel value="general" h="100%">
-                    {torrent !== undefined
-                        ? <GeneralPane torrent={torrent} />
-                        : <></>}
-                </Tabs.Panel>
-                <Tabs.Panel value="files" h="100%">
-                    {torrent !== undefined
-                        ? <FileTreePane torrent={torrent} />
-                        : <></>}
-                </Tabs.Panel>
-                <Tabs.Panel value="pieces" h="100%">
-                    {torrent !== undefined
-                        ? <PiecesCanvas torrent={torrent} />
-                        : <></>}
-                </Tabs.Panel>
-                <Tabs.Panel value="peers" h="100%">
-                    {torrent !== undefined
-                        ? <PeersTable torrent={torrent} />
-                        : <></>}
-                </Tabs.Panel>
-                <Tabs.Panel value="trackers" h="100%">
-                    {torrent !== undefined
-                        ? <TrackersTable torrent={torrent} />
-                        : <></>}
-                </Tabs.Panel>
-                <Tabs.Panel value="serverstats" h="100%">
-                    <ServerStats />
-                </Tabs.Panel>
+                <DetailsPanels torrent={torrent} />
             </div>
         </Tabs>
     );
diff --git a/src/components/filters.tsx b/src/components/filters.tsx
index e866f06..13800c2 100644
--- a/src/components/filters.tsx
+++ b/src/components/filters.tsx
@@ -251,7 +251,7 @@ function flattenTree(root: Directory): Directory[] {
     return result;
 }
 
-export function Filters(props: FiltersProps) {
+export const Filters = React.memo(function Filters(props: FiltersProps) {
     const config = useContext(ConfigContext);
     const serverConfig = useContext(ServerConfigContext);
     const forceRender = useForceRender();
@@ -274,11 +274,9 @@ export function Filters(props: FiltersProps) {
         () => props.torrents.map((t) => t.downloadDir as string).sort(),
         [props.torrents]);
 
-    const [dirs, setDirs] = useState<Directory[]>([]);
-
-    useEffect(() => {
+    const dirs = useMemo<Directory[]>(() => {
         const tree = buildDirTree(paths, serverConfig.expandedDirFilters);
-        setDirs(flattenTree(tree));
+        return flattenTree(tree);
     }, [paths, serverConfig.expandedDirFilters]);
 
     const allFilters = useMemo<AllFilters>(() => {
@@ -350,4 +348,4 @@ export function Filters(props: FiltersProps) {
             </div>}
         </Flex>
     );
-}
+});
diff --git a/src/components/modals/add.tsx b/src/components/modals/add.tsx
index 0b4a058..ac04419 100644
--- a/src/components/modals/add.tsx
+++ b/src/components/modals/add.tsx
@@ -18,11 +18,11 @@
 
 import { Box, Button, Checkbox, Divider, Flex, Group, Menu, Overlay, SegmentedControl, Text, TextInput, useMantineTheme } from "@mantine/core";
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import type { ActionModalState, LabelsData, LocationData } from "./common";
+import type { ModalState, LocationData } from "./common";
 import { HkModal, TorrentLabels, TorrentLocation, limitTorrentNames, useTorrentLocation } from "./common";
 import type { PriorityNumberType } from "rpc/transmission";
 import { PriorityColors, PriorityStrings } from "rpc/transmission";
-import type { Torrent } from "rpc/torrent";
+import { useServerTorrentData, type Torrent } from "rpc/torrent";
 import { CachedFileTree } from "cachedfiletree";
 import { FileTreeTable, useUnwantedFiles } from "components/tables/filetreetable";
 import { notifications } from "@mantine/notifications";
@@ -35,7 +35,8 @@ const { TAURI, dialogOpen, invoke } = await import(/* webpackChunkName: "taurish
 
 interface AddCommonProps extends React.PropsWithChildren {
     location: LocationData,
-    labelsData: LabelsData,
+    labels: string[],
+    setLabels: React.Dispatch<string[]>,
     start: boolean,
     setStart: (b: boolean) => void,
     priority: PriorityNumberType,
@@ -46,7 +47,7 @@ interface AddCommonProps extends React.PropsWithChildren {
 function AddCommon(props: AddCommonProps) {
     return <>
         <TorrentLocation {...props.location} inputLabel="Download directory" disabled={props.disabled} />
-        <TorrentLabels {...props.labelsData} inputLabel="Labels" disabled={props.disabled} />
+        <TorrentLabels labels={props.labels} setLabels={props.setLabels} inputLabel="Labels" disabled={props.disabled} />
         <Group>
             <Checkbox
                 label="Start torrent"
@@ -69,47 +70,34 @@ function AddCommon(props: AddCommonProps) {
     </>;
 }
 
-interface AddCommonModalProps extends ActionModalState {
+interface AddCommonModalProps extends ModalState {
     serverName: string,
     uri: string | File | undefined,
     tabsRef: React.RefObject<ServerTabsRef>,
 }
 
-function useCommonProps(modalProps: AddCommonModalProps) {
+function useCommonProps() {
     const location = useTorrentLocation();
     const [labels, setLabels] = useState<string[]>([]);
-    const [labelsData, setLabelData] = useState<LabelsData>({
-        labels,
-        setLabels,
-        allLabels: modalProps.serverData.current.allLabels,
-    });
     const [start, setStart] = useState<boolean>(true);
     const [priority, setPriority] = useState<PriorityNumberType>(0);
 
-    useEffect(() => {
-        setLabelData({
-            labels,
-            setLabels,
-            allLabels: modalProps.serverData.current.allLabels,
-        });
-    }, [labels, modalProps.opened, modalProps.serverData]);
-
     const props = useMemo<AddCommonProps>(() => ({
         location,
-        labelsData,
+        labels,
+        setLabels,
         start,
         setStart,
         priority,
         setPriority,
-    }), [location, labelsData, start, priority]);
+    }), [location, labels, start, priority]);
 
-    return {
+    return useMemo(() => ({
         location,
-        labels,
         start,
         priority,
         props,
-    };
+    }), [location, priority, props, start]);
 }
 
 function TabSwitchDropdown({ tabsRef }: { tabsRef: React.RefObject<ServerTabsRef> }) {
@@ -147,6 +135,7 @@ function TabSwitchDropdown({ tabsRef }: { tabsRef: React.RefObject<ServerTabsRef
 }
 
 export function AddMagnet(props: AddCommonModalProps) {
+    const serverData = useServerTorrentData();
     const [magnet, setMagnet] = useState<string>("");
 
     useEffect(() => {
@@ -166,14 +155,14 @@ export function AddMagnet(props: AddCommonModalProps) {
 
     useEffect(() => {
         if (magnetData !== undefined && magnetData.hash !== "") {
-            const torrent = props.serverData.current?.torrents.find((t) => t.hashString === magnetData.hash);
+            const torrent = serverData.torrents.find((t) => t.hashString === magnetData.hash);
             setExistingTorrent(torrent);
         } else {
             setExistingTorrent(undefined);
         }
-    }, [props.serverData, props.serverName, magnetData]);
+    }, [serverData, props.serverName, magnetData]);
 
-    const common = useCommonProps(props);
+    const common = useCommonProps();
     const { close } = props;
     const addMutation = useAddTorrent(
         useCallback((response: any) => {
@@ -211,7 +200,7 @@ export function AddMagnet(props: AddCommonModalProps) {
                 {
                     url: magnet,
                     downloadDir: common.location.path,
-                    labels: common.labels,
+                    labels: common.props.labels,
                     paused: !common.start,
                     priority: common.priority,
                 },
@@ -231,7 +220,7 @@ export function AddMagnet(props: AddCommonModalProps) {
             );
         }
         close();
-    }, [existingTorrent, close, addMutation, magnet, common.location, common.labels, common.start, common.priority, trackersMutation, magnetData]);
+    }, [existingTorrent, close, addMutation, magnet, common, trackersMutation, magnetData]);
 
     return (
         <HkModal opened={props.opened} onClose={close} centered size="lg"
@@ -248,7 +237,7 @@ export function AddMagnet(props: AddCommonModalProps) {
                 error={existingTorrent === undefined
                     ? undefined
                     : "Torrent already exists"} />
-            <AddCommon {...common.props} disabled={existingTorrent !== undefined}/>
+            <AddCommon {...common.props} disabled={existingTorrent !== undefined} />
             <Divider my="sm" />
             <Group position="center" spacing="md">
                 <Button onClick={onAdd} variant="filled"
@@ -331,7 +320,8 @@ interface TorrentFileData {
 
 export function AddTorrent(props: AddCommonModalProps) {
     const config = useContext(ConfigContext);
-    const common = useCommonProps(props);
+    const serverData = useServerTorrentData();
+    const common = useCommonProps();
     const [torrentData, setTorrentData] = useState<TorrentFileData[]>();
 
     const filesInputRef = useRef<HTMLInputElement>(null);
@@ -344,10 +334,10 @@ export function AddTorrent(props: AddCommonModalProps) {
 
     useEffect(() => {
         if (torrentData !== undefined && torrentData.length === 1) {
-            const torrent = props.serverData.current?.torrents.find((t) => t.hashString === torrentData[0].hash);
+            const torrent = serverData.torrents.find((t) => t.hashString === torrentData[0].hash);
             setExistingTorrent(torrent);
         }
-    }, [props.serverData, props.serverName, torrentData]);
+    }, [serverData, props.serverName, torrentData]);
 
     useEffect(() => {
         if (!TAURI && props.opened) {
@@ -485,7 +475,7 @@ export function AddTorrent(props: AddCommonModalProps) {
                     {
                         metainfo: td.metadata,
                         downloadDir: common.location.path,
-                        labels: common.labels,
+                        labels: common.props.labels,
                         paused: !common.start,
                         priority: common.priority,
                         unwanted: (td.files == null || torrentData.length > 1) ? undefined : fileTree.getUnwanted(),
diff --git a/src/components/modals/common.tsx b/src/components/modals/common.tsx
index 05a8871..667d850 100644
--- a/src/components/modals/common.tsx
+++ b/src/components/modals/common.tsx
@@ -25,7 +25,7 @@ import { ConfigContext, ServerConfigContext } from "config";
 import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { pathMapFromServer, pathMapToServer } from "trutil";
 import * as Icon from "react-bootstrap-icons";
-import type { ServerTorrentData } from "rpc/torrent";
+import { useServerTorrentData } from "rpc/torrent";
 import { useHotkeysContext } from "hotkeys";
 const { TAURI, dialogOpen } = await import(/* webpackChunkName: "taurishim" */"taurishim");
 
@@ -46,10 +46,6 @@ export function HkModal(props: ModalProps) {
     return <Modal {...props}>{props.children}</Modal>;
 }
 
-export interface ActionModalState extends ModalState {
-    serverData: React.MutableRefObject<ServerTorrentData>,
-}
-
 interface SaveCancelModalProps extends ModalProps {
     onSave: () => void,
     onClose: () => void,
@@ -80,14 +76,16 @@ export function limitTorrentNames(allNames: string[], limit: number = 5) {
     return names;
 }
 
-export function TorrentsNames({ serverData }: { serverData: React.RefObject<ServerTorrentData> }) {
+export function TorrentsNames() {
+    const serverData = useServerTorrentData();
+
     const allNames = useMemo<string[]>(() => {
-        if (serverData.current == null || serverData.current.selected.size === 0) {
+        if (serverData.current == null || serverData.selected.size === 0) {
             return ["No torrent selected"];
         }
 
-        const selected = serverData.current.torrents.filter(
-            (t) => serverData.current?.selected.has(t.id));
+        const selected = serverData.torrents.filter(
+            (t) => serverData.selected.has(t.id));
 
         const allNames: string[] = [];
         selected.forEach((t) => allNames.push(t.name));
@@ -181,7 +179,6 @@ export function TorrentLocation(props: LocationData) {
 }
 
 export interface LabelsData {
-    allLabels: string[],
     labels: string[],
     setLabels: React.Dispatch<string[]>,
     inputLabel?: string,
@@ -215,7 +212,8 @@ function Label({
 }
 
 export function TorrentLabels(props: LabelsData) {
-    const [data, setData] = useState<string[]>(props.allLabels);
+    const serverData = useServerTorrentData();
+    const [data, setData] = useState<string[]>(serverData.allLabels);
 
     return (
         <MultiSelect
diff --git a/src/components/modals/editlabels.tsx b/src/components/modals/editlabels.tsx
index b3581c7..5c8e904 100644
--- a/src/components/modals/editlabels.tsx
+++ b/src/components/modals/editlabels.tsx
@@ -17,25 +17,27 @@
  */
 
 import { Text } from "@mantine/core";
-import type { ActionModalState } from "./common";
+import type { ModalState } from "./common";
 import { SaveCancelModal, TorrentLabels, TorrentsNames } from "./common";
 import React, { useCallback, useEffect, useState } from "react";
 import { useMutateTorrent } from "queries";
 import { notifications } from "@mantine/notifications";
+import { useServerTorrentData } from "rpc/torrent";
 
-export function EditLabelsModal(props: ActionModalState) {
+export function EditLabelsModal(props: ModalState) {
     const { opened, close } = props;
+    const serverData = useServerTorrentData();
     const [labels, setLabels] = useState<string[]>([]);
 
     const calculateInitialLabels = useCallback(() => {
-        const selected = props.serverData.current?.torrents.filter(
-            (t) => props.serverData.current?.selected.has(t.id)) ?? [];
+        const selected = serverData.torrents.filter(
+            (t) => serverData.selected.has(t.id)) ?? [];
         const labels: string[] = [];
         selected.forEach((t) => t.labels?.forEach((l: string) => {
             if (!labels.includes(l)) labels.push(l);
         }));
         return labels;
-    }, [props.serverData]);
+    }, [serverData]);
 
     useEffect(() => {
         if (opened) setLabels(calculateInitialLabels());
@@ -46,7 +48,7 @@ export function EditLabelsModal(props: ActionModalState) {
     const onSave = useCallback(() => {
         mutation.mutate(
             {
-                torrentIds: Array.from(props.serverData.current.selected),
+                torrentIds: Array.from(serverData.selected),
                 fields: { labels },
             },
             {
@@ -66,7 +68,7 @@ export function EditLabelsModal(props: ActionModalState) {
             },
         );
         close();
-    }, [mutation, props.serverData, labels, close]);
+    }, [mutation, serverData.selected, labels, close]);
 
     return (
         <SaveCancelModal
@@ -78,8 +80,8 @@ export function EditLabelsModal(props: ActionModalState) {
             title="Edit torrent labels"
         >
             <Text mb="md">Enter new labels for</Text>
-            <TorrentsNames serverData={props.serverData} />
-            <TorrentLabels allLabels={props.serverData.current.allLabels} labels={labels} setLabels={setLabels} />
+            <TorrentsNames/>
+            <TorrentLabels labels={labels} setLabels={setLabels} />
         </SaveCancelModal>
     );
 }
diff --git a/src/components/modals/edittorrent.tsx b/src/components/modals/edittorrent.tsx
index 51cead8..0215da6 100644
--- a/src/components/modals/edittorrent.tsx
+++ b/src/components/modals/edittorrent.tsx
@@ -17,13 +17,14 @@
  */
 
 import React, { useCallback, useContext, useEffect } from "react";
-import type { ActionModalState } from "./common";
+import type { ModalState } from "./common";
 import { SaveCancelModal } from "./common";
 import { useForm } from "@mantine/form";
 import { useMutateTorrent, useTorrentDetails } from "queries";
 import { notifications } from "@mantine/notifications";
 import { Button, Checkbox, Grid, LoadingOverlay, NumberInput, Text, Textarea } from "@mantine/core";
 import { ConfigContext } from "config";
+import { useServerTorrentData } from "rpc/torrent";
 
 interface FormValues {
     downloadLimited?: boolean,
@@ -40,9 +41,11 @@ interface FormValues {
     sequentialDownload: boolean,
 }
 
-export function EditTorrent(props: ActionModalState) {
+export function EditTorrent(props: ModalState) {
     const config = useContext(ConfigContext);
-    const torrentId = props.serverData.current.current;
+    const serverData = useServerTorrentData();
+    const torrentId = serverData.current;
+
     const { data: torrent, isLoading } = useTorrentDetails(
         torrentId ?? -1, torrentId !== undefined && props.opened, false, true);
 
diff --git a/src/components/modals/move.tsx b/src/components/modals/move.tsx
index 3a7cb38..24879b2 100644
--- a/src/components/modals/move.tsx
+++ b/src/components/modals/move.tsx
@@ -18,12 +18,14 @@
 
 import { Button, Checkbox, Divider, Group, Text } from "@mantine/core";
 import React, { useCallback, useEffect, useState } from "react";
-import type { ActionModalState } from "./common";
+import type { ModalState } from "./common";
 import { HkModal, TorrentLocation, TorrentsNames, useTorrentLocation } from "./common";
 import { useTorrentChangeDirectory } from "queries";
 import { notifications } from "@mantine/notifications";
+import { useServerTorrentData } from "rpc/torrent";
 
-export function MoveModal(props: ActionModalState) {
+export function MoveModal(props: ModalState) {
+    const serverData = useServerTorrentData();
     const [moveData, setMoveData] = useState<boolean>(true);
 
     const location = useTorrentLocation();
@@ -34,7 +36,7 @@ export function MoveModal(props: ActionModalState) {
     const onMove = useCallback(() => {
         mutation.mutate(
             {
-                torrentIds: Array.from(props.serverData.current.selected),
+                torrentIds: Array.from(serverData.selected),
                 location: location.path,
                 move: moveData,
             },
@@ -50,13 +52,13 @@ export function MoveModal(props: ActionModalState) {
         );
 
         props.close();
-    }, [mutation, props, location.path, moveData]);
+    }, [mutation, serverData.selected, location.path, moveData, props]);
 
     const calculateInitialLocation = useCallback(() => {
-        const [id] = [...props.serverData.current.selected];
-        const torrent = props.serverData.current.torrents.find((t) => t.id === id);
+        const [id] = [...serverData.selected];
+        const torrent = serverData.torrents.find((t) => t.id === id);
         return torrent?.downloadDir ?? "";
-    }, [props.serverData]);
+    }, [serverData]);
 
     useEffect(() => {
         if (props.opened) setPath(calculateInitialLocation());
@@ -66,7 +68,7 @@ export function MoveModal(props: ActionModalState) {
         <HkModal opened={props.opened} onClose={props.close} title="Move torrents" centered size="lg">
             <Divider my="sm" />
             <Text mb="md">Enter new location for</Text>
-            <TorrentsNames serverData={props.serverData} />
+            <TorrentsNames />
             <TorrentLocation {...location} />
             <Checkbox
                 label="Move torrent data to new location"
diff --git a/src/components/modals/remove.tsx b/src/components/modals/remove.tsx
index e5adeae..fbbbfa2 100644
--- a/src/components/modals/remove.tsx
+++ b/src/components/modals/remove.tsx
@@ -17,13 +17,15 @@
  */
 
 import { Button, Checkbox, Divider, Group, Text } from "@mantine/core";
-import type { ActionModalState } from "./common";
+import type { ModalState } from "./common";
 import { HkModal, TorrentsNames } from "./common";
 import React, { useCallback, useState } from "react";
 import { useRemoveTorrents } from "queries";
 import { notifications } from "@mantine/notifications";
+import { useServerTorrentData } from "rpc/torrent";
 
-export function RemoveModal(props: ActionModalState) {
+export function RemoveModal(props: ModalState) {
+    const serverData = useServerTorrentData();
     const [deleteData, setDeleteData] = useState<boolean>(false);
 
     const mutation = useRemoveTorrents();
@@ -31,7 +33,7 @@ export function RemoveModal(props: ActionModalState) {
     const onDelete = useCallback(() => {
         mutation.mutate(
             {
-                torrentIds: Array.from(props.serverData.current.selected),
+                torrentIds: Array.from(serverData.selected),
                 deleteData,
             },
             {
@@ -45,13 +47,13 @@ export function RemoveModal(props: ActionModalState) {
             },
         );
         props.close();
-    }, [mutation, props, deleteData]);
+    }, [mutation, serverData.selected, deleteData, props]);
 
     return (
         <HkModal opened={props.opened} onClose={props.close} title="Remove torrents" centered size="lg">
             <Divider my="sm" />
             <Text mb="md">Are you sure you want to remove following torrents?</Text>
-            <TorrentsNames serverData={props.serverData} />
+            <TorrentsNames />
             <Checkbox
                 label="Delete torrent data"
                 checked={deleteData}
diff --git a/src/components/modals/servermodals.tsx b/src/components/modals/servermodals.tsx
index 56745f7..9c25e5a 100644
--- a/src/components/modals/servermodals.tsx
+++ b/src/components/modals/servermodals.tsx
@@ -18,7 +18,6 @@
 
 import { useDisclosure } from "@mantine/hooks";
 import React, { memo, useCallback, useEffect, useImperativeHandle, useState } from "react";
-import type { ServerTorrentData } from "rpc/torrent";
 import { EditLabelsModal } from "./editlabels";
 import { RemoveModal } from "./remove";
 import { MoveModal } from "./move";
@@ -40,7 +39,6 @@ export interface ModalCallbacks {
 
 interface ServerModalsProps {
     serverName: string,
-    serverData: React.MutableRefObject<ServerTorrentData>,
     runUpdates: (run: boolean) => void,
     tabsRef: React.RefObject<ServerTabsRef>,
 }
@@ -173,30 +171,24 @@ const ServerModals = React.forwardRef<ModalCallbacks, ServerModalsProps>(functio
 
     return <>
         <EditLabelsModal
-            serverData={props.serverData}
             opened={showLabelsModal} close={closeLabelsModal} />
         <RemoveModal
-            serverData={props.serverData}
             opened={showRemoveModal} close={closeRemoveModal} />
         <MoveModal
-            serverData={props.serverData}
             opened={showMoveModal} close={closeMoveModal} />
         <AddMagnet
             serverName={props.serverName}
-            serverData={props.serverData}
             uri={magnetLink}
             tabsRef={props.tabsRef}
             opened={showAddMagnetModal} close={closeAddMagnetModalAndPop} />
         <AddTorrent
             serverName={props.serverName}
-            serverData={props.serverData}
             uri={torrent}
             tabsRef={props.tabsRef}
             opened={showAddTorrentModal} close={closeAddTorrentModalAndPop} />
         <DaemonSettingsModal
             opened={showDaemonSettingsModal} close={closeDaemonSettingsModal} />
         <EditTorrent
-            serverData={props.serverData}
             opened={showEditTorrentModal} close={closeEditTorrentModal} />
     </>;
 });
diff --git a/src/components/server.tsx b/src/components/server.tsx
index 3151425..15428df 100644
--- a/src/components/server.tsx
+++ b/src/components/server.tsx
@@ -21,8 +21,7 @@ import { Box, Flex, Loader, Overlay, Title } from "@mantine/core";
 import React, { useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState } from "react";
 import type { SplitType } from "../config";
 import { ConfigContext, ServerConfigContext } from "../config";
-import type { Torrent } from "../rpc/torrent";
-import { useServerTorrentData } from "../rpc/torrent";
+import { ServerTorrentDataContext, type Torrent } from "../rpc/torrent";
 import { MemoizedDetails } from "./details";
 import type { TorrentFilter } from "./filters";
 import { DefaultFilter, Filters } from "./filters";
@@ -50,7 +49,7 @@ function currentFiltersReducer(
     return newFilters;
 }
 
-function useSelected(torrents: Torrent[] | undefined) {
+function useSelected() {
     const hk = useHotkeysContext();
     const selectAll = useRef(() => { });
 
@@ -67,6 +66,7 @@ function useSelected(torrents: Torrent[] | undefined) {
             for (const id of ids) result.add(id);
         } else if (action.verb === "filter") {
             result = new Set(Array.from(result).filter((t) => ids.includes(t)));
+            if (result.size === selected.size) result = selected;
         } else if (action.verb === "toggle") {
             for (const id of ids) {
                 if (!result.delete(id)) result.add(id);
@@ -132,7 +132,7 @@ export function Server({ hostname, tabsRef }: ServerProps) {
         return [Array.from(labels).sort(), Array.from(trackers).sort()];
     }, [torrents]);
 
-    const { selectedTorrents, selectedReducer, selectAll } = useSelected(torrents);
+    const { selectedTorrents, selectedReducer, selectAll } = useSelected();
 
     const [filteredTorrents, setFilteredTorrents] = useState<Torrent[]>([]);
     useEffect(() => {
@@ -164,7 +164,15 @@ export function Server({ hostname, tabsRef }: ServerProps) {
     const overlayVisible = sessionIsError || sessionIsLoading ||
         session?.["rpc-version"] === undefined || session["rpc-version"] < 15;
 
-    const serverData = useServerTorrentData(torrents ?? [], selectedTorrents, currentTorrent, allLabels);
+    const rpcVersion = session?.["rpc-version"] ?? 0;
+
+    const serverData = useMemo(() => ({
+        torrents: torrents ?? [],
+        selected: selectedTorrents,
+        current: currentTorrent,
+        allLabels,
+        rpcVersion,
+    }), [torrents, selectedTorrents, currentTorrent, allLabels, rpcVersion]);
 
     const config = useContext(ConfigContext);
     const serverConfig = useContext(ServerConfigContext);
@@ -181,9 +189,9 @@ export function Server({ hostname, tabsRef }: ServerProps) {
         config.values.interface.mainSplit = mainSplit;
     }, [config, showFiltersPanel, showDetailsPanel, mainSplit]);
 
-    return (
+    return <ServerTorrentDataContext.Provider value={serverData}>
         <Flex direction="column" w="100%" h="100%" sx={{ position: "relative" }}>
-            <MemoizedServerModals ref={modals} {...{ serverData, runUpdates, tabsRef }} serverName={serverConfig.name} />
+            <MemoizedServerModals ref={modals} {...{ runUpdates, tabsRef }} serverName={serverConfig.name} />
             {overlayVisible && <Overlay blur={10}>
                 <Flex align="center" justify="center" h="100%" direction="column" gap="xl">
                     {sessionIsLoading
@@ -202,7 +210,6 @@ export function Server({ hostname, tabsRef }: ServerProps) {
                 <MemoizedToolbar
                     setSearchTerms={setSearchTerms}
                     modals={modals}
-                    serverData={serverData}
                     altSpeedMode={session?.["alt-speed-enabled"] ?? false}
                     toggleFiltersPanel={toggleFiltersPanel}
                     toggleDetailsPanel={toggleDetailsPanel}
@@ -223,7 +230,6 @@ export function Server({ hostname, tabsRef }: ServerProps) {
                     : undefined}
                 right={
                     <TorrentTable
-                        serverData={serverData}
                         modals={modals}
                         torrents={filteredTorrents}
                         setCurrentTorrent={setCurrentTorrent}
@@ -244,6 +250,6 @@ export function Server({ hostname, tabsRef }: ServerProps) {
                     hostname,
                 }} />
             </Box>
-        </Flex >
-    );
+        </Flex>
+    </ServerTorrentDataContext.Provider>;
 }
diff --git a/src/components/tables/torrenttable.tsx b/src/components/tables/torrenttable.tsx
index 8727d99..d3bd5b7 100644
--- a/src/components/tables/torrenttable.tsx
+++ b/src/components/tables/torrenttable.tsx
@@ -18,7 +18,7 @@
 
 import "css/torrenttable.css";
 import React, { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import type { ServerTorrentData, Torrent } from "rpc/torrent";
+import { useServerTorrentData, type ServerTorrentData, type Torrent } from "rpc/torrent";
 import type { TorrentAllFieldsType, TorrentFieldsType } from "rpc/transmission";
 import { PriorityColors, PriorityStrings, Status, StatusStrings, TorrentMinimumFields } from "rpc/transmission";
 import type { ColumnDef, VisibilityState } from "@tanstack/react-table";
@@ -357,7 +357,6 @@ export function useInitialTorrentRequiredFields() {
 }
 
 export function TorrentTable(props: {
-    serverData: React.MutableRefObject<ServerTorrentData>,
     modals: React.RefObject<ModalCallbacks>,
     torrents: Torrent[],
     setCurrentTorrent: (id: string) => void,
@@ -406,7 +405,6 @@ export function TorrentTable(props: {
             <MemoizedTorrentContextMenu
                 contextMenuInfo={info}
                 setContextMenuInfo={setInfo}
-                serverData={props.serverData}
                 selected={selected}
                 modals={props.modals}
                 onRowDoubleClick={onRowDoubleClick} />
@@ -426,25 +424,26 @@ export function TorrentTable(props: {
     );
 }
 
-const findTorrent = (serverData: React.MutableRefObject<ServerTorrentData>) => {
-    const [id] = [...serverData.current.selected];
-    return serverData.current.torrents.find((t) => t.id === id);
-};
+function findTorrent(serverData: ServerTorrentData) {
+    const [id] = [...serverData.selected];
+    return serverData.torrents.find((t) => t.id === id);
+}
 
 function TorrentContextMenu(props: {
     contextMenuInfo: ContextMenuInfo,
     setContextMenuInfo: (i: ContextMenuInfo) => void,
-    serverData: React.MutableRefObject<ServerTorrentData>,
     selected: string[],
     modals: React.RefObject<ModalCallbacks>,
     onRowDoubleClick: (t: Torrent) => void,
 }) {
+    const serverData = useServerTorrentData();
+
     const { onRowDoubleClick } = props;
     const onOpen = useCallback(() => {
-        const torrent = findTorrent(props.serverData);
+        const torrent = findTorrent(serverData);
         if (torrent === undefined) return;
         onRowDoubleClick(torrent);
-    }, [onRowDoubleClick, props.serverData]);
+    }, [onRowDoubleClick, serverData]);
 
     const mutation = useTorrentAction();
 
@@ -452,7 +451,7 @@ function TorrentContextMenu(props: {
         mutation.mutate(
             {
                 method,
-                torrentIds: Array.from(props.serverData.current.selected),
+                torrentIds: Array.from(serverData.selected),
             },
             {
                 onSuccess: () => {
@@ -463,7 +462,7 @@ function TorrentContextMenu(props: {
                 },
             },
         );
-    }, [mutation, props.serverData]);
+    }, [mutation, serverData]);
 
     const [queueSubmenuOpened, setQueueSubmenuOpened] = useState(false);
     const queueRef = useRef<HTMLButtonElement>(null);
@@ -481,10 +480,10 @@ function TorrentContextMenu(props: {
     }, []);
 
     const copyMagnetLinks = useCallback(() => {
-        const selected = props.serverData.current.selected;
+        const selected = serverData.selected;
         if (selected.size === 0) return;
 
-        const links = props.serverData.current.torrents
+        const links = serverData.torrents
             .filter((t) => selected.has(t.id))
             .map((t) => t.magnetLink);
 
@@ -494,7 +493,7 @@ function TorrentContextMenu(props: {
             message: `Magnet ${selected.size > 1 ? "links" : "link"} copied to clipboard`,
             color: "green",
         });
-    }, [props.serverData]);
+    }, [serverData]);
 
     const hk = useHotkeysContext();
 
diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx
index 1d1ddfb..af903ad 100644
--- a/src/components/toolbar.tsx
+++ b/src/components/toolbar.tsx
@@ -25,13 +25,13 @@ import type { PriorityNumberType } from "rpc/transmission";
 import { BandwidthPriority } from "rpc/transmission";
 import { useTorrentAction, useMutateSession, useMutateTorrent } from "queries";
 import { notifications } from "@mantine/notifications";
-import type { ServerTorrentData } from "rpc/torrent";
 import type { TorrentActionMethodsType } from "rpc/client";
 import type { ModalCallbacks } from "./modals/servermodals";
 import type { HotkeyHandlers } from "hotkeys";
 import { useHotkeysContext } from "hotkeys";
 import { useHotkeys } from "@mantine/hooks";
 import { modKeyString } from "trutil";
+import { useServerTorrentData } from "rpc/torrent";
 
 interface ToolbarButtonProps extends React.PropsWithChildren<React.ComponentPropsWithRef<"button">> {
     depressed?: boolean,
@@ -62,7 +62,6 @@ const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(function
 interface ToolbarProps {
     setSearchTerms: (terms: string[]) => void,
     modals: React.RefObject<ModalCallbacks>,
-    serverData: React.MutableRefObject<ServerTorrentData>,
     altSpeedMode: boolean,
     toggleFiltersPanel: () => void,
     toggleDetailsPanel: () => void,
@@ -74,20 +73,21 @@ function useButtonHandlers(
     altSpeedMode: boolean | undefined,
     setAltSpeedMode: React.Dispatch<boolean | undefined>,
 ) {
+    const serverData = useServerTorrentData();
     const actionMutation = useTorrentAction();
     const priorityMutation = useMutateTorrent();
 
     const handlers = useMemo(() => {
         const checkSelected = (action?: () => void) => {
             return () => {
-                if (props.serverData.current?.selected.size > 0) action?.();
+                if (serverData.selected.size > 0) action?.();
             };
         };
         const action = (method: TorrentActionMethodsType) => () => {
             actionMutation.mutate(
                 {
                     method,
-                    torrentIds: Array.from(props.serverData.current.selected),
+                    torrentIds: Array.from(serverData.selected),
                 },
                 {
                     onError: (e) => {
@@ -103,7 +103,7 @@ function useButtonHandlers(
         const priority = (bandwidthPriority: PriorityNumberType) => () => {
             priorityMutation.mutate(
                 {
-                    torrentIds: Array.from(props.serverData.current.selected),
+                    torrentIds: Array.from(serverData.selected),
                     fields: { bandwidthPriority },
                 },
                 {
@@ -137,7 +137,7 @@ function useButtonHandlers(
             setPriorityLow: checkSelected(priority(BandwidthPriority.low)),
             daemonSettings: () => { props.modals.current?.daemonSettings(); },
         };
-    }, [actionMutation, priorityMutation, props.modals, props.serverData]);
+    }, [actionMutation, priorityMutation, props.modals, serverData]);
 
     const sessionMutation = useMutateSession();
 
diff --git a/src/rpc/torrent.ts b/src/rpc/torrent.ts
index 1c4c2f7..fa6ff26 100644
--- a/src/rpc/torrent.ts
+++ b/src/rpc/torrent.ts
@@ -18,7 +18,7 @@
 
 import type { BandwidthGroupFieldType, PeerStatsFieldsType, TorrentAllFieldsType, TrackerStatsFieldsType } from "./transmission";
 import { Status } from "./transmission";
-import { useRef, useEffect } from "react";
+import React, { useContext } from "react";
 import type { TransmissionClient } from "./client";
 
 export type TrackerStats = Partial<Record<TrackerStatsFieldsType, any>>;
@@ -119,25 +119,19 @@ export interface ServerTorrentData {
     selected: Set<number>,
     current: number | undefined,
     allLabels: string[],
+    rpcVersion: number,
 }
 
-export function useServerTorrentData(torrents: Torrent[], selectedTorrents: Set<number>, currentTorrent: number | undefined, allLabels: string[]) {
-    const serverData = useRef<ServerTorrentData>({
-        torrents: torrents ?? [],
-        selected: selectedTorrents,
-        current: currentTorrent,
-        allLabels,
-    });
-
-    useEffect(() => {
-        serverData.current = {
-            torrents: torrents ?? [],
-            selected: selectedTorrents,
-            current: currentTorrent,
-            allLabels,
-        };
-    }, [torrents, selectedTorrents, currentTorrent, allLabels]);
-    return serverData;
+export const ServerTorrentDataContext = React.createContext<ServerTorrentData>({
+    torrents: [],
+    selected: new Set(),
+    current: undefined,
+    allLabels: [],
+    rpcVersion: 0,
+});
+
+export function useServerTorrentData() {
+    return useContext(ServerTorrentDataContext);
 }
 
 type PeerStatsBase = Partial<Record<PeerStatsFieldsType, any>>;