CODEBASE: Add custom useRerender hook (#359)

src/Faction/ui/AugmentationsPage.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, Tooltip, Typography, Paper, Container } from "@mui/material";
-import React, { useState } from "react";
+import React from "react";
 
 import { StaticAugmentations } from "../../Augmentation/StaticAugmentations";
 import { getGenericAugmentationPriceMultiplier } from "../../Augmentation/AugmentationHelpers";
@@ -15,6 +15,7 @@ import { FactionNames } from "../data/FactionNames";
 import { Faction } from "../Faction";
 import { getFactionAugmentationsFiltered, hasAugmentationPrereqs, purchaseAugmentation } from "../FactionHelpers";
 import { CONSTANTS } from "../../Constants";
+import { useRerender } from "../../ui/React/hooks";
 
 type IProps = {
   faction: Faction;
@@ -23,11 +24,7 @@ type IProps = {
 
 /** Root React Component for displaying a faction's "Purchase Augmentations" page */
 export function AugmentationsPage(props: IProps): React.ReactElement {
-  const setRerender = useState(false)[1];
-
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
+  const rerender = useRerender();
 
   function getAugs(): string[] {
     return getFactionAugmentationsFiltered(props.faction);

src/Faction/ui/FactionRoot.tsx

@@ -3,7 +3,7 @@
  * This is the component for displaying a single faction's UI, not the list of all
  * accessible factions
  */
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 
 import { AugmentationsPage } from "./AugmentationsPage";
 import { DonateOption } from "./DonateOption";
@@ -25,6 +25,7 @@ import { FactionNames } from "../data/FactionNames";
 import { GangButton } from "./GangButton";
 import { FactionWork } from "../../Work/FactionWork";
 import { FactionWorkType } from "../../Enums";
+import { useRerender } from "../../ui/React/hooks";
 
 type IProps = {
   faction: Faction;
@@ -152,18 +153,9 @@ function MainPage({ faction, rerender, onAugmentations }: IMainProps): React.Rea
 }
 
 export function FactionRoot(props: IProps): React.ReactElement {
-  const setRerender = useState(false)[1];
+  const rerender = useRerender(200);
   const [purchasingAugs, setPurchasingAugs] = useState(props.augPage);
 
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  useEffect(() => {
-    const id = setInterval(rerender, 200);
-    return () => clearInterval(id);
-  }, []);
-
   const faction = props.faction;
 
   if (!Player.factions.includes(faction.name)) {

src/Faction/ui/FactionsRoot.tsx

@@ -1,6 +1,6 @@
 import { Explore, Info, LastPage, LocalPolice, NewReleases, Report, SportsMma } from "@mui/icons-material";
 import { Box, Button, Container, Paper, Tooltip, Typography, useTheme } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { Player } from "@player";
 import { Settings } from "../../Settings/Settings";
 import { formatFavor, formatReputation } from "../../ui/formatNumber";
@@ -9,6 +9,7 @@ import { FactionNames } from "../data/FactionNames";
 import { Faction } from "../Faction";
 import { getFactionAugmentationsFiltered, joinFaction } from "../FactionHelpers";
 import { Factions } from "../Factions";
+import { useRerender } from "../../ui/React/hooks";
 
 export const InvitationsSeen: string[] = [];
 
@@ -166,15 +167,7 @@ const FactionElement = (props: FactionElementProps): React.ReactElement => {
 
 export function FactionsRoot(): React.ReactElement {
   const theme = useTheme();
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-  useEffect(() => {
-    const id = setInterval(rerender, 200);
-    return () => clearInterval(id);
-  }, []);
-
+  const rerender = useRerender(200);
   useEffect(() => {
     Player.factionInvitations.forEach((faction) => {
       if (InvitationsSeen.includes(faction)) return;

src/Faction/ui/Info.tsx

@@ -2,7 +2,7 @@
  * React component for general information about the faction. This includes the
  * factions "motto", reputation, favor, and gameplay instructions
  */
-import React, { useState, useEffect } from "react";
+import React from "react";
 
 import { Faction } from "../Faction";
 import { FactionInfo } from "../FactionInfo";
@@ -16,6 +16,7 @@ import createStyles from "@mui/styles/createStyles";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
 import Box from "@mui/material/Box";
+import { useRerender } from "../../ui/React/hooks";
 
 type IProps = {
   faction: Faction;
@@ -43,16 +44,7 @@ function DefaultAssignment(): React.ReactElement {
 }
 
 export function Info(props: IProps): React.ReactElement {
-  const setRerender = useState(false)[1];
-  function rerender(): void {
-    setRerender((old) => !old);
-  }
-
-  useEffect(() => {
-    const id = setInterval(rerender, 200);
-    return () => clearInterval(id);
-  }, []);
-
+  useRerender(200);
   const classes = useStyles();
 
   const Assignment = props.factionInfo.assignment ?? DefaultAssignment;