UI: Sync UI updates to game updates. (#1512)

There are a bunch of React components that update at the same rate
that the game engine processes cycles. Rather than have each place
that does so start its own timer to update that often, add a new
react hook that triggers an update shortly after the engine completes
a cycle.

src/Faction/ui/FactionRoot.tsx

@@ -20,7 +20,7 @@ import { CovenantPurchasesRoot } from "../../PersonObjects/Sleeve/ui/CovenantPur
 import { FactionName, FactionWorkType } from "@enums";
 import { GangButton } from "./GangButton";
 import { FactionWork } from "../../Work/FactionWork";
-import { useRerender } from "../../ui/React/hooks";
+import { useCycleRerender } from "../../ui/React/hooks";
 import { repNeededToDonate } from "../formulas/donation";
 
 type FactionRootProps = {
@@ -147,7 +147,7 @@ function MainPage({ faction, rerender, onAugmentations }: IMainProps): React.Rea
 }
 
 export function FactionRoot({ faction }: FactionRootProps): React.ReactElement {
-  const rerender = useRerender(200);
+  const rerender = useCycleRerender();
 
   if (!Player.factions.includes(faction.name)) {
     return (

src/Faction/ui/FactionsRoot.tsx

@@ -9,7 +9,7 @@ import { Settings } from "../../Settings/Settings";
 import { formatFavor, formatReputation } from "../../ui/formatNumber";
 import { Router } from "../../ui/GameRoot";
 import { Page } from "../../ui/Router";
-import { useRerender } from "../../ui/React/hooks";
+import { useCycleRerender } from "../../ui/React/hooks";
 import { CorruptableText } from "../../ui/React/CorruptableText";
 import { Requirement } from "../../ui/Components/Requirement";
 
@@ -205,7 +205,7 @@ const FactionElement = (props: FactionElementProps): React.ReactElement => {
 
 export function FactionsRoot(): React.ReactElement {
   const theme = useTheme();
-  const rerender = useRerender(200);
+  const rerender = useCycleRerender();
   useEffect(() => {
     Player.factionInvitations.forEach((factionName) => {
       InvitationsSeen.add(factionName);

src/Faction/ui/Info.tsx

@@ -15,7 +15,7 @@ import { makeStyles } from "tss-react/mui";
 import Typography from "@mui/material/Typography";
 import Tooltip from "@mui/material/Tooltip";
 import Box from "@mui/material/Box";
-import { useRerender } from "../../ui/React/hooks";
+import { useCycleRerender } from "../../ui/React/hooks";
 import { calculateFavorAfterResetting } from "../formulas/favor";
 
 interface IProps {
@@ -42,7 +42,7 @@ function DefaultAssignment(): React.ReactElement {
 }
 
 export function Info(props: IProps): React.ReactElement {
-  useRerender(200);
+  useCycleRerender();
   const { classes } = useStyles();
 
   const Assignment = props.factionInfo.assignment ?? DefaultAssignment;