Make React Compiler happy.

hera/audio/Music.tsx

@@ -3,17 +3,17 @@ import { Biome } from '@deities/athena/map/Biome.tsx';
 import UnknownTypeError from '@deities/hephaestus/UnknownTypeError.tsx';
 import AudioPlayer from '@deities/ui/AudioPlayer.tsx';
 import useLocation from '@deities/ui/hooks/useLocation.tsx';
-import { createContext, ReactNode, useContext, useEffect } from 'react';
+import { createContext, ReactNode, useContext, useEffect, useRef } from 'react';
 
 type MusicContext = {
   songByRoute: Map<string, SongName | null>;
-  timer?: ReturnType<typeof setTimeout>;
+  timerRef: { current?: ReturnType<typeof setTimeout> };
 };
 
 const fallbackSong = 'hestias-serenade';
 const context: MusicContext = {
   songByRoute: new Map(),
-  timer: undefined,
+  timerRef: {},
 };
 const Context = createContext<MusicContext>(context);
 
@@ -38,11 +38,14 @@ const isPlaying = (video: HTMLVideoElement | null | undefined) =>
 
 export function usePlayMusic(dep?: unknown) {
   const { pathname } = useLocation();
-  const context = useContext(Context);
+  const context = useRef(useContext(Context));
   useEffect(() => {
-    clearTimeout(context.timer);
-    context.timer = setTimeout(
-      () => AudioPlayer.play(context.songByRoute.get(pathname) || fallbackSong),
+    clearTimeout(context.current.timerRef.current);
+    context.current.timerRef.current = setTimeout(
+      () =>
+        AudioPlayer.play(
+          context.current.songByRoute.get(pathname) || fallbackSong,
+        ),
       isPlaying(
         document
           .getElementById('video')

tests/display.tsx

@@ -12,7 +12,7 @@ import AudioPlayer from '@deities/ui/AudioPlayer.tsx';
 import initializeCSS from '@deities/ui/CSS.tsx';
 import { applyVar } from '@deities/ui/cssVar.tsx';
 import { css, cx, injectGlobal } from '@emotion/css';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 
@@ -34,18 +34,21 @@ window.renderMap = (url: string) => {
   root.render(<DisplayMap url={url} />);
 };
 
-const ErrorComponent = ({ error }: { error: Error }) => (
-  <>
-    {Object.keys(window.MapHasRendered).map((key) => {
+const ErrorComponent = ({ error }: { error: Error }) => {
+  const keys = useMemo(() => Object.keys(window.MapHasRendered), []);
+
+  useLayoutEffect(() => {
+    keys.map((key) => {
       window.MapHasRendered[key] = true;
-      return (
-        <div className={redStyle} data-testid={`map-${key}`} key={key}>
-          {error.message}
-        </div>
-      );
-    })}
-  </>
-);
+    });
+  }, [keys]);
+
+  return keys.map((key) => (
+    <div className={redStyle} data-testid={`map-${key}`} key={key}>
+      {error.message}
+    </div>
+  ));
+};
 
 const DisplayMap = ({ url: initialURL }: { url: string }) => {
   const url = new URL(initialURL);
@@ -57,10 +60,12 @@ const DisplayMap = ({ url: initialURL }: { url: string }) => {
     [maps],
   );
 
-  // Initialize global state for listeners.
-  gameActionResponses?.forEach((_, index) => {
-    window.MapHasRendered[index] = false;
-  });
+  useLayoutEffect(() => {
+    // Initialize global state for listeners.
+    gameActionResponses?.forEach((_, index) => {
+      window.MapHasRendered[index] = false;
+    });
+  }, [gameActionResponses]);
 
   useEffect(() => {
     if (gameActionResponses?.length) {

ui/Reload.tsx

@@ -9,7 +9,7 @@ export default function Reload() {
 
   return (
     <Fragment>
-      {useMemo(hasGamePad, []) ? (
+      {useMemo(() => hasGamePad(), []) ? (
         <fbt desc="Reload description">
           Press A, B, L1 and R1 to reload the game.
         </fbt>

ui/hooks/useScrollRestore.tsx

@@ -21,11 +21,11 @@ export const ScrollRestoreContext = ({ children }: { children: ReactNode }) => (
 
 export default function useScrollRestore() {
   const { pathname } = useLocation();
-  const context = useContext(Context);
+  const context = useRef(useContext(Context));
   useEffect(() => {
     const timer = setTimeout(() => {
       if (context.current) {
-        context.current = false;
+        context.current.current = false;
       } else {
         window.scrollTo(0, 0);
       }