diff --git a/src/components/PageTitleInput.tsx b/src/components/PageTitleInput.tsx
index 5943cd2..e66fd8f 100644
--- a/src/components/PageTitleInput.tsx
+++ b/src/components/PageTitleInput.tsx
@@ -1,4 +1,4 @@
-import { Suspense, useMemo, useState } from 'react';
+import { Suspense, useState } from 'react';
 import useDebounce from '../hooks/useDebounce';
 import { fetchPageId } from '../services/MediaWikiAPIs';
 import { PageIdFetcher } from './PageIdFetcher';
@@ -15,21 +15,21 @@ export function PageTitleInput({
 	const [pageTitle, setPageTitle] = useState(initialPageTitle);
 	const debouncedPageTitle = useDebounce(pageTitle.trim(), 300);
 
-	// Note: useMemo callback cannot be async (linter rule), but returning a Promise is fine.
-	// Semantically equivalent to async/await, but React wants explicit Promise return.
-	const pageIdPromise = useMemo(() => {
+	// React Compiler auto-memoizes based on reactive dependencies (wikiUrl, debouncedPageTitle)
+	const pageIdPromise = (async () => {
 		// guard
 		if (!debouncedPageTitle) {
-			return Promise.resolve({});
+			return {};
 		}
 		// fetch page ID
-		return fetchPageId(wikiUrl, debouncedPageTitle)
-			.then((id) => ({ id: id.toString() }))
-			.catch((error) => {
-				console.error('Error fetching page ID:', error);
-				return { error: 'Error fetching page ID. Please try again.' };
-			});
-	}, [wikiUrl, debouncedPageTitle]);
+		try {
+			const id = await fetchPageId(wikiUrl, debouncedPageTitle);
+			return { id: id.toString() };
+		} catch (error) {
+			console.error('Error fetching page ID:', error);
+			return { error: 'Error fetching page ID. Please try again.' };
+		}
+	})();
 
 	return (
 		<div className="form-group">