React strictness.

GitOrigin-RevId: 40f869822cdfa901f53bf9bdf2f31f104bb69734

hera/Building.tsx

@@ -122,8 +122,17 @@ const BuildingTile = memo(function BuildingTile({
 
       animate();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animation]);
+  }, [
+    animation,
+    animationConfig,
+    height,
+    isBeingCreated,
+    position,
+    positionY,
+    requestFrame,
+    scheduleTimer,
+    size,
+  ]);
 
   const showHighlight = highlight && player > 0;
   const isCompleted = building.isCompleted();

hera/Cursor.tsx

@@ -42,7 +42,6 @@ export default memo(function Cursor({
     useCallback((tick: number) => {
       ref.current?.style.setProperty(vars.set('tick'), String(tick % 4));
     }, []),
-    [],
   );
 
   return (

hera/Decorators.tsx

@@ -120,6 +120,7 @@ export default memo(function Decorators({
         }
       });
     }
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [biome, hasSprites, isVisible, map.size, map.decorators, paused, size]);
 

hera/Mask.tsx

@@ -277,6 +277,7 @@ export default memo(function Mask({
         ))}
       </div>
     );
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     attackable,

hera/MaskWithSubtiles.tsx

@@ -54,6 +54,7 @@ export default memo(function MaskWithSubtiles({
           .flat()}
       </div>
     ),
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [decoratorSize, enter, map.size, select, zIndex],
   );

hera/Tick.tsx

@@ -57,7 +57,6 @@ export default function Tick({
         );
       }
     }, []),
-    [],
   );
 
   return (

hera/Tiles.tsx

@@ -258,6 +258,7 @@ export default memo(function Tiles({
       });
     }
 
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     biome,

hera/Unit.tsx

@@ -892,8 +892,34 @@ export default function UnitTile({
         }
       }, animationConfig.ExplosionStep / 2);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animation]);
+  }, [
+    animation,
+    animationConfig.AnimationDuration,
+    animationConfig.ExplosionStep,
+    animationConfig.UnitAnimationStep,
+    animationConfig.UnitMoveDuration,
+    animationKey,
+    animationOffset,
+    backgroundPositionY,
+    getLayer,
+    hasAttackStance,
+    info,
+    isAnimating,
+    isMoving,
+    isSpawning,
+    onAnimationComplete,
+    player,
+    position,
+    positionOffset.x,
+    positionOffset.y,
+    requestFrame,
+    scheduleTimer,
+    size,
+    spritePosition,
+    tile,
+    unit,
+    unitDirection,
+  ]);
 
   const isCompleted = unit.isCompleted();
   const animationStyle =

hera/audio/Music.tsx

@@ -7,7 +7,7 @@ import AudioPlayer from '@deities/ui/AudioPlayer.tsx';
 import { NativeTimeout } from '@deities/ui/controls/throttle.tsx';
 import useLocation from '@deities/ui/hooks/useLocation.tsx';
 import useVisibilityState from '@deities/ui/hooks/useVisibilityState.tsx';
-import { createContext, ReactNode, useContext, useEffect } from 'react';
+import { createContext, ReactNode, useContext, useEffect, useRef } from 'react';
 
 type MusicContext = {
   songByRoute: Map<string, SongName | null>;
@@ -64,11 +64,12 @@ const onVisibilityChange = (isVisible: boolean) => {
 
 export function usePlayMusic(dep?: unknown) {
   const { pathname } = useLocation();
-  const context = useContext(Context);
+  const contextRef = useRef(useContext(Context));
 
   useVisibilityState(onVisibilityChange);
 
   useEffect(() => {
+    const context = contextRef.current;
     if (context.timer != null) {
       clearTimeout(context.timer);
     }
@@ -82,7 +83,7 @@ export function usePlayMusic(dep?: unknown) {
         ? 3000
         : 100,
     );
-  }, [context, pathname, dep]);
+  }, [pathname, dep]);
 }
 
 export function biomeToSong(

hera/campaign/CampaignEditor.tsx

@@ -113,6 +113,7 @@ export default function CampaignEditor({
   const { slug } = data;
   const [hasChanges, setHasChanges] = useState(!data.id);
   const [mapHasChanges, setMapHasChanges] = useState(false);
+  const [origin, setOrigin] = useState('');
   const [difficulty, setDifficulty] = useState<AttributeRangeWithZero>(
     validateAttributeRange(data.difficulty) ? data.difficulty : 0,
   );
@@ -285,6 +286,7 @@ export default function CampaignEditor({
           navigate(getMapRoute(node.slug, 'edit'));
           return;
         }
+        setOrigin(transformRef.current);
         setShowAllDialogue(false);
         setCampaignEditorState({
           map: node,
@@ -547,9 +549,7 @@ export default function CampaignEditor({
                 transform: 'scale(0)',
               }}
               style={{
-                transformOrigin: transformRef.current?.length
-                  ? transformRef.current
-                  : 'center center',
+                transformOrigin: origin?.length ? origin : 'center center',
               }}
               transition={{
                 duration: 0.25,

hera/editor/MapEditor.tsx

@@ -852,6 +852,7 @@ export default function MapEditor({
   // Disabling the context menu is handled globally in production,
   // so this is only needed for the Map Editor in development.
   if (process.env.NODE_ENV === 'development') {
+    // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       const listener = (event: Event) => event.preventDefault();

hera/lib/tick.tsx

@@ -59,16 +59,11 @@ export default function tick(fn: TickFunction) {
   };
 }
 
-export function useTick(
-  paused: boolean | undefined,
-  fn: TickFunction,
-  dependencies: Array<unknown>,
-) {
+export function useTick(paused: boolean | undefined, fn: TickFunction) {
   const isVisible = useVisibilityState();
   useEffect(() => {
     if (!paused && isVisible) {
       return tick(fn);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fn, isVisible, paused, ...dependencies]);
+  }, [fn, isVisible, paused]);
 }

hera/ui/CharacterMessage.tsx

@@ -173,8 +173,7 @@ const MessageComponent = ({
     }, 100);
     window.addEventListener('resize', listener);
     return () => window.removeEventListener('resize', listener);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentLine, clientWidth, lines]);
+  }, [currentLine, clientWidth, lines, onComplete]);
 
   useEffect(() => {
     AudioPlayer.playSound(sound);

hera/ui/Message.tsx

@@ -81,8 +81,7 @@ const MessageComponent = ({
     }, 100);
     window.addEventListener('resize', listener);
     return () => window.removeEventListener('resize', listener);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentLine, clientWidth, lines]);
+  }, [currentLine, clientWidth, lines, onComplete]);
 
   // Avoid double invocations of onComplete.
   const done = useRef(false);
@@ -106,8 +105,7 @@ const MessageComponent = ({
       done.current = true;
       onComplete();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [timer, animationComplete, hasNext, clearTimer, currentLine]);
+  }, [timer, animationComplete, hasNext, clearTimer, currentLine, onComplete]);
 
   useInput('accept', next);
   useEffect(() => {

hera/ui/lib/useSkipAnimation.tsx

@@ -15,8 +15,7 @@ export default function useSkipAnimation({
     if (animationConfig.Instant) {
       scheduleTimer(onComplete, 0);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [animationConfig.Instant, onComplete, scheduleTimer]);
 
   return animationConfig.Instant;
 }

tests/display.tsx

@@ -36,6 +36,13 @@ window.renderMap = (url: string) => {
   root.render(<DisplayMap url={url} />);
 };
 
+const initializeHasRendered = (gameActionResponses: ReadonlyArray<string>) => {
+  // Initialize global state for listeners.
+  gameActionResponses?.forEach((_, index) => {
+    window.MapHasRendered[index] = false;
+  });
+};
+
 const animationSpeed = {
   human: InstantAnimationConfig,
   regular: InstantAnimationConfig,
@@ -64,10 +71,7 @@ const DisplayMap = ({ url: initialURL }: { url: string }) => {
     [maps],
   );
 
-  // Initialize global state for listeners.
-  gameActionResponses?.forEach((_, index) => {
-    window.MapHasRendered[index] = false;
-  });
+  initializeHasRendered(gameActionResponses);
 
   useEffect(() => {
     if (gameActionResponses?.length) {

ui/Menu.tsx

@@ -13,6 +13,7 @@ import {
   useEffect,
   useLayoutEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import { App } from './App.tsx';
@@ -41,16 +42,16 @@ export const MenuContext = ({ children }: { children: ReactNode }) => {
 };
 
 export const useDisableOpenMenuOnCancel = () => {
-  const context = useContext(Context);
+  const context = useRef(useContext(Context));
   useEffect(() => {
-    context.current = false;
+    context.current.current = false;
   }, [context]);
 };
 
 export const useOpenMenuOnCancel = () => {
-  const context = useContext(Context);
+  const context = useRef(useContext(Context));
   useEffect(() => {
-    context.current = true;
+    context.current.current = true;
   }, [context]);
 };
 

ui/Reload.tsx

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

ui/controls/useMenuNavigation.tsx

@@ -9,17 +9,23 @@ export default function useMenuNavigation(
   initialCount: number,
   layer: InputLayer = 'menu',
   nowrap = false,
-  initial = -1,
+  initial: 'selected' | number = -1,
 ): [selected: number, active: number, reset: () => void] {
   const [count, setCount] = useState(initialCount);
   const [selected, setSelected] = useState(
-    isValid(count, initial) ? initial : -1,
+    initial !== 'selected' && isValid(count, initial) ? initial : -1,
   );
   const [active, resetActive] = useAcceptNavigation(count, layer, selected);
 
   if (count !== initialCount) {
     setCount(initialCount);
-    setSelected(isValid(initialCount, initial) ? initial : -1);
+    setSelected(
+      initial === 'selected'
+        ? selected
+        : isValid(initialCount, initial)
+          ? initial
+          : -1,
+    );
     if (active !== -1) {
       resetActive();
     }
@@ -57,8 +63,14 @@ export default function useMenuNavigation(
     selected,
     active,
     useCallback(() => {
-      setSelected(isValid(count, initial) ? initial : -1);
+      setSelected(
+        initial === 'selected'
+          ? selected
+          : isValid(count, initial)
+            ? initial
+            : -1,
+      );
       resetActive();
-    }, [count, initial, resetActive]),
+    }, [count, initial, resetActive, selected]),
   ];
 }

ui/hooks/useScrollRestore.tsx

@@ -21,11 +21,11 @@ export const ScrollRestoreContext = ({ children }: { children: ReactNode }) => (
 
 export default function useScrollRestore() {
   const { hash, pathname } = useLocation();
-  const context = useContext(Context);
+  const context = useRef(useContext(Context));
   useEffect(() => {
     let timer = setTimeout(() => {
       if (context.current) {
-        context.current = false;
+        context.current.current = false;
       } else if (hash.length > 1) {
         timer = setTimeout(() => {
           document.getElementById(hash.slice(1))?.scrollIntoView({
@@ -41,8 +41,8 @@ export default function useScrollRestore() {
 }
 
 export function useSkipScrollRestore() {
-  const scrollRestoreContext = useContext(ScrollRestore);
+  const scrollRestoreContext = useRef(useContext(ScrollRestore));
   useEffect(() => {
-    scrollRestoreContext.current = true;
+    scrollRestoreContext.current.current = true;
   }, [scrollRestoreContext]);
 }