CODEBASE: Add custom useRerender hook (#359)

src/ui/ActiveScripts/ActiveScriptsRoot.tsx

@@ -2,30 +2,23 @@
  * Root React Component for the "Active Scripts" UI page. This page displays
  * and provides information about all of the player's scripts that are currently running
  */
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 
 import { ActiveScriptsPage } from "./ActiveScriptsPage";
 import { RecentScriptsPage } from "./RecentScriptsPage";
 import { WorkerScript } from "../../Netscript/WorkerScript";
+import { useRerender } from "../React/hooks";
 
 interface IProps {
   workerScripts: Map<number, WorkerScript>;
 }
 
 export function ActiveScriptsRoot(props: IProps): React.ReactElement {
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  useEffect(() => {
-    const id = setInterval(rerender, 200);
-    return () => clearInterval(id);
-  }, []);
-
   const [tab, setTab] = useState<"active" | "recent">("active");
+  useRerender(200);
+
   function handleChange(event: React.SyntheticEvent, tab: "active" | "recent"): void {
     setTab(tab);
   }

src/ui/ActiveScripts/ServerAccordions.tsx

@@ -16,6 +16,7 @@ import { BaseServer } from "../../Server/BaseServer";
 import { Settings } from "../../Settings/Settings";
 import { TablePaginationActionsAll } from "../React/TablePaginationActionsAll";
 import SearchIcon from "@mui/icons-material/Search";
+import { useRerender } from "../React/hooks";
 
 // Map of server hostname -> all workerscripts on that server for all active scripts
 interface IServerData {
@@ -35,7 +36,7 @@ export function ServerAccordions(props: IProps): React.ReactElement {
   const [filter, setFilter] = useState("");
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(Settings.ActiveScriptsServerPageSize);
-  const setRerender = useState(false)[1];
+  const rerender = useRerender();
 
   const handleChangePage = (event: unknown, newPage: number): void => {
     setPage(newPage);
@@ -78,10 +79,6 @@ export function ServerAccordions(props: IProps): React.ReactElement {
       (data.server.hostname.includes(filter) || data.server.runningScripts.find((s) => s.filename.includes(filter))),
   );
 
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
   useEffect(() => WorkerScriptStartStopEventEmitter.subscribe(rerender));
 
   return (

src/ui/CharacterStats.tsx

@@ -1,6 +1,6 @@
 import { Paper, Table, TableBody, Box, IconButton, Typography, Container, Tooltip } from "@mui/material";
 import { MoreHoriz, Info } from "@mui/icons-material";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { BitNodes, defaultMultipliers, getBitNodeMultipliers } from "../BitNode/BitNode";
 import { BitNodeMultipliers } from "../BitNode/BitNodeMultipliers";
 import { BitNodeMultipliersDisplay } from "../BitNode/ui/BitnodeMultipliersDescription";
@@ -16,6 +16,7 @@ import { Money } from "./React/Money";
 import { StatsRow } from "./React/StatsRow";
 import { StatsTable } from "./React/StatsTable";
 import { isEqual } from "lodash";
+import { useRerender } from "./React/hooks";
 
 interface EmployersModalProps {
   open: boolean;
@@ -199,15 +200,7 @@ function MoneyModal({ open, onClose }: IMoneyModalProps): React.ReactElement {
 export function CharacterStats(): React.ReactElement {
   const [moneyOpen, setMoneyOpen] = useState(false);
   const [employersOpen, setEmployersOpen] = useState(false);
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  useEffect(() => {
-    const id = setInterval(rerender, 200);
-    return () => clearInterval(id);
-  }, []);
+  useRerender(200);
 
   const timeRows = [
     ["Since last Augmentation installation", convertTimeMsToTimeElapsedString(Player.playtimeSinceLastAug)],

src/ui/GameRoot.tsx

@@ -77,6 +77,7 @@ import { Apr1 } from "./Apr1";
 import { isFactionWork } from "../Work/FactionWork";
 import { V2Modal } from "../utils/V2Modal";
 import { MathJaxContext } from "better-react-mathjax";
+import { useRerender } from "./React/hooks";
 
 const htmlLocation = location;
 
@@ -127,7 +128,7 @@ export function GameRoot(): React.ReactElement {
   const classes = useStyles();
   const [{ files, vim }, setEditorOptions] = useState({ files: {}, vim: false });
   const [page, setPage] = useState(determineStartPage());
-  const setRerender = useState(0)[1];
+  const rerender = useRerender();
   const [augPage, setAugPage] = useState<boolean>(false);
   const [faction, setFaction] = useState<Faction>(
     isFactionWork(Player.currentWork) ? Factions[Player.currentWork.factionName] : (undefined as unknown as Faction),
@@ -155,9 +156,6 @@ export function GameRoot(): React.ReactElement {
     setErrorBoundaryKey(errorBoundaryKey + 1);
   }
 
-  function rerender(): void {
-    setRerender((old) => old + 1);
-  }
   useEffect(() => {
     return ITutorialEvents.subscribe(rerender);
   }, []);

src/ui/InteractiveTutorial/InteractiveTutorialRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
@@ -27,6 +27,7 @@ import {
   iTutorialSteps,
   iTutorialEnd,
 } from "../../InteractiveTutorial";
+import { useRerender } from "../React/hooks";
 
 interface IContent {
   content: React.ReactElement;
@@ -47,6 +48,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export function InteractiveTutorialRoot(): React.ReactElement {
   const classes = useStyles();
+  const rerender = useRerender();
 
   const tutorialScriptName = `n00dles.js`;
 
@@ -556,11 +558,6 @@ export function InteractiveTutorialRoot(): React.ReactElement {
     },
   };
 
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
   useEffect(() => {
     return ITutorialEvents.subscribe(rerender);
   }, []);

src/ui/React/LogBoxManager.tsx

@@ -19,6 +19,7 @@ import { debounce } from "lodash";
 import { Settings } from "../../Settings/Settings";
 import { ANSIITypography } from "./ANSIITypography";
 import { ScriptArg } from "../../Netscript/ScriptArg";
+import { useRerender } from "./hooks";
 
 let layerCounter = 0;
 
@@ -53,10 +54,7 @@ interface Log {
 let logs: Log[] = [];
 
 export function LogBoxManager(): React.ReactElement {
-  const setRerender = useState(true)[1];
-  function rerender(): void {
-    setRerender((o) => !o);
-  }
+  const rerender = useRerender();
   useEffect(
     () =>
       LogBoxEvents.subscribe((script: RunningScript) => {
@@ -140,12 +138,9 @@ function LogWindow(props: IProps): React.ReactElement {
   const classes = useStyles();
   const container = useRef<HTMLDivElement>(null);
   const textArea = useRef<HTMLDivElement>(null);
-  const setRerender = useState(false)[1];
+  const rerender = useRerender(1000);
   const [size, setSize] = useState<[number, number]>([500, 500]);
   const [minimized, setMinimized] = useState(false);
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
 
   const textAreaKeyDown = (e: React.KeyboardEvent) => {
     if (e.ctrlKey && e.key === "a") {
@@ -214,8 +209,6 @@ function LogWindow(props: IProps): React.ReactElement {
 
   useEffect(() => {
     updateLayer();
-    const id = setInterval(rerender, 1000);
-    return () => clearInterval(id);
   }, []);
 
   function kill(): void {

src/ui/React/hooks.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+/** Hook that returns a function for the component. Optionally set an interval to rerender the component.
+ * @param autoRerenderTime: Optional. If provided and nonzero, used as the ms interval to automatically call the rerender function.
+ */
+export function useRerender(autoRerenderTime?: number) {
+  const setRerender = useState(false)[1];
+  const rerender = () => setRerender((old) => !old);
+  useEffect(() => {
+    if (!autoRerenderTime) return;
+    const intervalID = setInterval(rerender, autoRerenderTime);
+    return () => clearInterval(intervalID);
+  }, []);
+  return rerender;
+}

src/ui/WorkInProgressRoot.tsx

@@ -2,7 +2,7 @@ import { Box, Container, Paper, Table, TableBody, Tooltip } from "@mui/material"
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 import { uniqueId } from "lodash";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { Companies } from "../Company/Companies";
 import { CONSTANTS } from "../Constants";
 import { LocationName } from "../Enums";
@@ -27,6 +27,7 @@ import { isGraftingWork } from "../Work/GraftingWork";
 import { isFactionWork } from "../Work/FactionWork";
 import { FactionWorkType } from "../Enums";
 import { isCompanyWork } from "../Work/CompanyWork";
+import { useRerender } from "./React/hooks";
 
 const CYCLES_PER_SEC = 1000 / CONSTANTS.MilliPerCycle;
 
@@ -193,15 +194,7 @@ function CrimeExpRows(rate: WorkStats): React.ReactElement[] {
 }
 
 export function WorkInProgressRoot(): React.ReactElement {
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  useEffect(() => {
-    const id = setInterval(rerender, CONSTANTS.MilliPerCycle);
-    return () => clearInterval(id);
-  }, []);
+  useRerender(CONSTANTS.MilliPerCycle);
 
   let workInfo: IWorkInfo = {
     buttons: {