Remove useOnce hook

app/components/MapPoolSelector.tsx

@@ -18,7 +18,6 @@ import type { CalendarEvent } from "~/db/types";
 import type { SerializedMapPoolEvent } from "~/routes/calendar/map-pool-events";
 import { assertType } from "~/utils/types";
 import { MapPoolEventsCombobox } from "./Combobox";
-import { useOnce } from "~/hooks/useOnce";
 
 export type MapPoolSelectorProps = {
   mapPool: MapPool;
@@ -46,8 +45,8 @@ export function MapPoolSelector({
     initialEvent ? "event" : detectTemplate(mapPool)
   );
 
-  const initialSerializedEvent: SerializedMapPoolEvent | undefined = useOnce(
-    () =>
+  const [initialSerializedEvent, setInitialSerializedEvent] = React.useState(
+    (): SerializedMapPoolEvent | undefined =>
       initialEvent && {
         ...initialEvent,
         serializedMapPool: mapPool.serialized,
@@ -67,7 +66,15 @@ export function MapPoolSelector({
   const handleTemplateChange = (template: MapPoolTemplateValue) => {
     setTemplate(template);
 
-    if (template === "none" || template === "event") {
+    if (template === "none") {
+      return;
+    }
+
+    if (template === "event") {
+      // If the user selected the "event" option, the _initial_ event passed via
+      // props is likely not the current state and should not be prefilled
+      // anymore.
+      setInitialSerializedEvent(undefined);
       return;
     }
 

app/hooks/useOnce.ts

@@ -1,10 +0,0 @@
-import { useMemo } from "react";
-
-/**
- * Utility hook for calling `useMemo(f, [])`, when you're sure it needs no
- * revalidation but feel bad for getting shamed by eslint everytime :D
- */
-export function useOnce<T>(factory: () => T) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(factory, []);
-}

app/routes/maps.tsx

@@ -30,7 +30,6 @@ import { calendarEventPage, ipLabsMaps } from "~/utils/urls";
 import { type SendouRouteHandle } from "~/utils/remix";
 import { MapPoolSelector, MapPoolStages } from "~/components/MapPoolSelector";
 import { EditIcon } from "~/components/icons/Edit";
-import { useOnce } from "~/hooks/useOnce";
 import { getUser } from "~/modules/auth";
 import type { CalendarEvent } from "~/db/types";
 
@@ -145,7 +144,7 @@ function useSearchParamPersistedMapPool() {
   const data = useLoaderData<typeof loader>();
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const initialMapPool = useOnce(() => {
+  const [mapPool, setMapPool] = React.useState(() => {
     if (searchParams.has("pool")) {
       return new MapPool(searchParams.get("pool")!);
     }
@@ -157,8 +156,6 @@ function useSearchParamPersistedMapPool() {
     return MapPool.ANARCHY;
   });
 
-  const [mapPool, setMapPool] = React.useState(initialMapPool);
-
   const handleMapPoolChange = (
     newMapPool: MapPool,
     event?: Pick<CalendarEvent, "id" | "name">