1/n Use zustand to reduce re-renders

crates/librqbit/webui/src/rqbit-web.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from "react";
-import { TorrentId, ErrorDetails as ApiErrorDetails } from "./api-types";
-import { AppContext, APIContext } from "./context";
+import { ErrorDetails as ApiErrorDetails } from "./api-types";
+import { APIContext } from "./context";
 import { RootContent } from "./components/RootContent";
 import { customSetInterval } from "./helper/customSetInterval";
 import { IconButton } from "./components/buttons/IconButton";
@@ -8,6 +8,8 @@ import { BsBodyText, BsMoon } from "react-icons/bs";
 import { LogStreamModal } from "./components/modal/LogStreamModal";
 import { Header } from "./components/Header";
 import { DarkMode } from "./helper/darkMode";
+import { useTorrentStore } from "./stores/torrentStore";
+import { useErrorStore } from "./stores/errorStore";
 
 export interface ErrorWithLabel {
   text: string;
@@ -23,17 +25,20 @@ export const RqbitWebUI = (props: {
   title: string;
   menuButtons?: JSX.Element[];
 }) => {
-  const [closeableError, setCloseableError] = useState<ErrorWithLabel | null>(
-    null
-  );
-  const [otherError, setOtherError] = useState<ErrorWithLabel | null>(null);
-
-  const [torrents, setTorrents] = useState<Array<TorrentId> | null>(null);
-  const [torrentsLoading, setTorrentsLoading] = useState(false);
   let [logsOpened, setLogsOpened] = useState<boolean>(false);
+  const setCloseableError = useErrorStore((state) => state.setCloseableError);
+  const setOtherError = useErrorStore((state) => state.setOtherError);
 
   const API = useContext(APIContext);
 
+  const setTorrents = useTorrentStore((state) => state.setTorrents);
+  const setTorrentsLoading = useTorrentStore(
+    (state) => state.setTorrentsLoading
+  );
+  const setRefreshTorrents = useTorrentStore(
+    (state) => state.setRefreshTorrents
+  );
+
   const refreshTorrents = async () => {
     setTorrentsLoading(true);
     let torrents = await API.listTorrents().finally(() =>
@@ -41,6 +46,7 @@ export const RqbitWebUI = (props: {
     );
     setTorrents(torrents.torrents);
   };
+  setRefreshTorrents(refreshTorrents);
 
   useEffect(() => {
     return customSetInterval(
@@ -66,35 +72,25 @@ export const RqbitWebUI = (props: {
   };
 
   return (
-    <AppContext.Provider value={context}>
-      <div className="dark:bg-gray-900 dark:text-gray-200 min-h-screen">
-        <Header title={props.title} />
-        <div className="relative">
-          {/* Menu buttons */}
-          <div className="absolute top-0 start-0 pl-2 z-10">
-            {props.menuButtons &&
-              props.menuButtons.map((b, i) => <span key={i}>{b}</span>)}
-            <IconButton onClick={() => setLogsOpened(true)}>
-              <BsBodyText />
-            </IconButton>
-            <IconButton onClick={DarkMode.toggle}>
-              <BsMoon />
-            </IconButton>
-          </div>
-
-          <RootContent
-            closeableError={closeableError}
-            otherError={otherError}
-            torrents={torrents}
-            torrentsLoading={torrentsLoading}
-          />
+    <div className="dark:bg-gray-900 dark:text-gray-200 min-h-screen">
+      <Header title={props.title} />
+      <div className="relative">
+        {/* Menu buttons */}
+        <div className="absolute top-0 start-0 pl-2 z-10">
+          {props.menuButtons &&
+            props.menuButtons.map((b, i) => <span key={i}>{b}</span>)}
+          <IconButton onClick={() => setLogsOpened(true)}>
+            <BsBodyText />
+          </IconButton>
+          <IconButton onClick={DarkMode.toggle}>
+            <BsMoon />
+          </IconButton>
         </div>
 
-        <LogStreamModal
-          show={logsOpened}
-          onClose={() => setLogsOpened(false)}
-        />
+        <RootContent />
       </div>
-    </AppContext.Provider>
+
+      <LogStreamModal show={logsOpened} onClose={() => setLogsOpened(false)} />
+    </div>
   );
 };