CODEBASE: Add custom useRerender hook (#359)

src/PersonObjects/Sleeve/ui/CovenantPurchasesRoot.tsx

@@ -2,7 +2,7 @@
  * Root React component for the popup that lets player purchase Duplicate
  * Sleeves and Sleeve-related upgrades from The Covenant
  */
-import React, { useState } from "react";
+import React from "react";
 
 import { CovenantSleeveMemoryUpgrade } from "./CovenantSleeveMemoryUpgrade";
 
@@ -17,6 +17,7 @@ import { dialogBoxCreate } from "../../../ui/React/DialogBox";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import { FactionNames } from "../../../Faction/data/FactionNames";
+import { useRerender } from "../../../ui/React/hooks";
 
 interface IProps {
   open: boolean;
@@ -24,18 +25,13 @@ interface IProps {
 }
 
 export function CovenantPurchasesRoot(props: IProps): React.ReactElement {
-  const [update, setUpdate] = useState(0);
+  const rerender = useRerender();
 
   /** Get the cost to purchase a new Duplicate Sleeve */
   function purchaseCost(): number {
     return Math.pow(10, Player.sleevesFromCovenant) * BaseCostPerSleeve;
   }
 
-  /** Force a rerender by just changing an arbitrary state value */
-  function rerender(): void {
-    setUpdate(update + 1);
-  }
-
   // Purchasing a new Duplicate Sleeve
   let purchaseDisabled = false;
   if (!Player.canAfford(purchaseCost())) {

src/PersonObjects/Sleeve/ui/SleeveAugmentationsModal.tsx

@@ -1,9 +1,10 @@
 import { Container, Typography, Paper } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { PurchasableAugmentations } from "../../../Augmentation/ui/PurchasableAugmentations";
 import { Player } from "@player";
 import { Modal } from "../../../ui/React/Modal";
 import { Sleeve } from "../Sleeve";
+import { useRerender } from "../../../ui/React/hooks";
 
 interface IProps {
   open: boolean;
@@ -12,15 +13,7 @@ interface IProps {
 }
 
 export function SleeveAugmentationsModal(props: IProps): React.ReactElement {
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  useEffect(() => {
-    const id = setInterval(rerender, 150);
-    return () => clearInterval(id);
-  }, []);
+  const rerender = useRerender(150);
 
   // Array of all owned Augmentations. Names only
   const ownedAugNames = props.sleeve.augmentations.map((e) => e.name);

src/PersonObjects/Sleeve/ui/SleeveRoot.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 
 import { Box, Typography, Button, Container } from "@mui/material";
 
@@ -6,18 +6,11 @@ import { Player } from "@player";
 
 import { SleeveElem } from "./SleeveElem";
 import { FAQModal } from "./FAQModal";
+import { useRerender } from "../../../ui/React/hooks";
 
 export function SleeveRoot(): React.ReactElement {
   const [FAQOpen, setFAQOpen] = useState(false);
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  useEffect(() => {
-    const id = setInterval(rerender, 200);
-    return () => clearInterval(id);
-  }, []);
+  const rerender = useRerender(200);
 
   return (
     <>