Fix multiple initialization issue

Author: trevorgerhardt

apps/osm-merge/src/hooks/osm.ts

@@ -1,11 +1,11 @@
 import { addLogMessageAtom } from "@/state/log"
 import { createOsmWorker } from "@/workers/osm"
-import { atom, useAtom, useSetAtom } from "jotai"
-import { Osm } from "osm.ts"
-import { useEffect, useMemo, useRef, useState } from "react"
 import * as Comlink from "comlink"
-import { useFitBoundsOnChange } from "./map"
+import { atom, useAtomValue, useSetAtom } from "jotai"
+import { Osm } from "osm.ts"
+import { useEffect, useMemo, useState } from "react"
 import useStartTask from "./log"
+import { useFitBoundsOnChange } from "./map"
 
 declare global {
 	interface Window {
@@ -17,21 +17,28 @@ const osmWorkerAtom = atom<Awaited<ReturnType<typeof createOsmWorker>> | null>(
 	null,
 )
 
+osmWorkerAtom.onMount = (setAtom) => {
+	let unmounted = false
+	createOsmWorker().then(async (newOsmWorker) => {
+		if (unmounted) return
+		window.osmWorker = newOsmWorker
+		// React treats the return value as a function and tries to call it, so it must be wrapped.
+		setAtom(() => newOsmWorker)
+	})
+	return () => {
+		unmounted = true
+	}
+}
+
 export function useOsmWorker() {
-	const isCreatingRef = useRef(false)
-	const [osmWorker, setOsmWorker] = useAtom(osmWorkerAtom)
+	const osmWorker = useAtomValue(osmWorkerAtom)
 	const logMessage = useSetAtom(addLogMessageAtom)
 
 	useEffect(() => {
-		if (isCreatingRef.current) return
-		isCreatingRef.current = true
-		createOsmWorker().then(async (newOsmWorker) => {
-			window.osmWorker = newOsmWorker
-			await newOsmWorker.subscribeToLog(Comlink.proxy(logMessage))
-			// React treats the return value as a function and tries to call it, so it must be wrapped.
-			setOsmWorker(() => newOsmWorker)
-		})
-	}, [logMessage, setOsmWorker])
+		if (osmWorker && logMessage) {
+			osmWorker.subscribeToLog(Comlink.proxy(logMessage))
+		}
+	}, [logMessage, osmWorker])
 
 	return osmWorker
 }
@@ -47,6 +54,7 @@ export function useOsmFile(file: File | null, id?: string) {
 
 	useEffect(() => {
 		if (!osmWorker || !file) return
+		console.log("useOsmFile", file, id, osmWorker)
 		const task = startTask(`Processing file ${file.name}...`)
 		const stream = file.stream()
 		setOsm(null)