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/PersonObjects/Grafting/ui/GraftingRoot.tsx

@@ -21,7 +21,7 @@ import { formatNumberNoSuffix } from "../../../ui/formatNumber";
 import { convertTimeMsToTimeElapsedString } from "../../../utils/StringHelperFunctions";
 import { GraftableAugmentation } from "../GraftableAugmentation";
 import { calculateGraftingTimeWithBonus, getGraftingAvailableAugs } from "../GraftingHelpers";
-import { useRerender } from "../../../ui/React/hooks";
+import { useCycleRerender } from "../../../ui/React/hooks";
 
 export const GraftableAugmentations = (): Record<string, GraftableAugmentation> => {
   const gAugs: Record<string, GraftableAugmentation> = {};
@@ -67,7 +67,7 @@ export const GraftingRoot = (): React.ReactElement => {
   const [selectedAug, setSelectedAug] = useState(getGraftingAvailableAugs()[0]);
   const [graftOpen, setGraftOpen] = useState(false);
   const selectedAugmentation = Augmentations[selectedAug];
-  const rerender = useRerender(200);
+  const rerender = useCycleRerender();
 
   const getAugsSorted = (): AugmentationName[] => {
     const augs = getGraftingAvailableAugs();

src/PersonObjects/Sleeve/ui/SleeveRoot.tsx

@@ -6,11 +6,11 @@ import { Player } from "@player";
 
 import { SleeveElem } from "./SleeveElem";
 import { FAQModal } from "./FAQModal";
-import { useRerender } from "../../../ui/React/hooks";
+import { useCycleRerender } from "../../../ui/React/hooks";
 
 export function SleeveRoot(): React.ReactElement {
   const [FAQOpen, setFAQOpen] = useState(false);
-  const rerender = useRerender(200);
+  const rerender = useCycleRerender();
 
   return (
     <>