perf(mobile): device preview compiles with the React Compiler

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: juliusmarminge

apps/mobile/src/features/devices/DevicePreviewRouteScreen.tsx

@@ -7,7 +7,7 @@ import {
 import { useIsFocused, useNavigation, type StaticScreenProps } from "@react-navigation/native";
 import { EnvironmentId, ThreadId } from "@t3tools/contracts";
 import * as Cause from "effect/Cause";
-import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
+import { useEffect, useRef, useState, type RefObject } from "react";
 import * as Haptics from "expo-haptics";
 import { Accelerometer } from "expo-sensors";
 import { AppState, BackHandler, Pressable, StatusBar, View } from "react-native";
@@ -47,7 +47,7 @@ type DevicePreviewRouteScreenProps = StaticScreenProps<{
 
 export function DevicePreviewRouteScreen({ route }: DevicePreviewRouteScreenProps) {
   const navigation = useNavigation();
-  const onClose = useCallback(() => navigation.goBack(), [navigation]);
+  const onClose = () => navigation.goBack();
   const { environmentId, threadId } = route.params;
   const isBlankLink = environmentId.trim().length === 0 || threadId.trim().length === 0;
   useEffect(() => {
@@ -85,15 +85,12 @@ function DevicePreviewScreen({
   const shutdown = useAtomCommand(deviceEnvironment.shutdown, { reportFailure: false });
   const streamRef = useRef<DeviceStreamRef>(null);
   const state = useEnvironmentQuery(deviceEnvironment.state({ environmentId, input: {} }));
-  const previews = useMemo(
-    () => threadDevicePreviews(state.data, threadId),
-    [state.data, threadId],
-  );
+  const previews = threadDevicePreviews(state.data, threadId);
   const preview = selectedThreadDevicePreview(previews, selectedKey);
-  const onInputConnected = useCallback(async (connected: boolean) => {
+  const onInputConnected = async (connected: boolean) => {
     setInputConnected(connected);
     if (connected) setControlsVisible(false);
-  }, []);
+  };
   useEffect(() => {
     const subscription = AppState.addEventListener("change", (state) =>
       setForeground(state !== "background"),
@@ -126,20 +123,16 @@ function DevicePreviewScreen({
   const shutDownDevice = async () => {
     if (!preview || shuttingDown) return;
     setShuttingDown(true);
-    try {
-      const result = await shutdown({
-        environmentId,
-        input: {
-          hostId: preview.session.hostId,
-          deviceId: preview.session.deviceId,
-          platform: preview.session.platform,
-        },
-      });
-      if (result._tag === "Failure") {
-        Dialog.alert("Could not shut down device", String(Cause.squash(result.cause)));
-      }
-    } finally {
-      setShuttingDown(false);
+    const result = await shutdown({
+      environmentId,
+      input: {
+        hostId: preview.session.hostId,
+        deviceId: preview.session.deviceId,
+        platform: preview.session.platform,
+      },
+    }).finally(() => setShuttingDown(false));
+    if (result._tag === "Failure") {
+      Dialog.alert("Could not shut down device", String(Cause.squash(result.cause)));
     }
   };
 
@@ -377,10 +370,7 @@ function OpenDevicePreview({
   const { session } = preview;
   const { themeVariables } = useAppearancePreferences();
   const { access, error, refresh } = useDeviceHubAccess(environmentId, session.hostId);
-  const onUnauthorized = useCallback(
-    async () => refreshDeviceHubAccess(environmentId),
-    [environmentId],
-  );
+  const onUnauthorized = async () => refreshDeviceHubAccess(environmentId);
   useEffect(() => {
     refreshDeviceHubAccess(environmentId);
     return () => void onInputConnected(false);

apps/mobile/src/features/devices/DeviceStreamWebView.tsx

@@ -4,7 +4,6 @@ import {
   useEffectEvent,
   useImperativeHandle,
   useLayoutEffect,
-  useMemo,
   useRef,
   useState,
   type Ref,
@@ -112,14 +111,11 @@ function DeviceStreamDocumentView({
     const timer = setTimeout(bootstrapTimedOut, 15_000);
     return () => clearTimeout(timer);
   }, [started]);
-  const source = useMemo(
-    () => ({
-      html: deviceStreamDocument(configuration, deviceStreamScript),
-      // Android WebCodecs needs a secure document; streams still use the environment's URLs.
-      baseUrl: Platform.OS === "android" ? "https://localhost/" : "file:///",
-    }),
-    [configuration],
-  );
+  const source = {
+    html: deviceStreamDocument(configuration, deviceStreamScript),
+    // Android WebCodecs needs a secure document; streams still use the environment's URLs.
+    baseUrl: Platform.OS === "android" ? "https://localhost/" : "file:///",
+  };
   const command = (button: keyof DeviceStreamRef) => {
     webView.current?.injectJavaScript(
       `window.T3DeviceStream?.command(${JSON.stringify(button)}); true;`,

apps/mobile/src/reactCompilerCoverage.test.ts

@@ -26,7 +26,6 @@ const KNOWN_BAILOUTS: Record<string, string> = {
   "src/components/ui/Menu.tsx": "ref read during render",
   "src/components/ui/OverlayPortal.tsx": "unsupported syntax",
   "src/features/connection/ConnectionsNewRouteScreen.tsx": "try without catch",
-  "src/features/devices/DevicePreviewRouteScreen.tsx": "try without catch",
   "src/features/diffs/nativeReviewDiffSurface.ts": "ref read during render",
   "src/features/files/AttachmentFileScreen.tsx": "manual memo not preserved",
   "src/features/files/FileMarkdownPreview.tsx": "try without catch",