refactor: replace useEffectEvent polyfill with native React 19.2 hook (#24060)

site/src/modules/navigation.ts

@@ -2,7 +2,7 @@
  * @fileoverview TODO: centralize navigation code here! URL constants, URL formatting, all of it
  */
 
-import { useEffectEvent } from "#/hooks/hookPolyfills";
+import { useCallback } from "react";
 import type { DashboardValue } from "./dashboard/DashboardProvider";
 import { useDashboard } from "./dashboard/useDashboard";
 
@@ -10,9 +10,10 @@ type LinkThunk = (state: DashboardValue) => string;
 
 export function useLinks() {
 	const dashboard = useDashboard();
-	// Needs to be safe to call `get` from inside of a `useEffect` without causing
-	// excess triggers from adding it as a dependency.
-	const get = useEffectEvent((thunk: LinkThunk): string => thunk(dashboard));
+	const get = useCallback(
+		(thunk: LinkThunk): string => thunk(dashboard),
+		[dashboard],
+	);
 	return get;
 }
 

site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx

@@ -1,4 +1,4 @@
-import { type FC, useEffect } from "react";
+import { type FC, useEffect, useEffectEvent } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { toast } from "sonner";
 import { watchInboxNotifications } from "#/api/api";
@@ -7,7 +7,6 @@ import type {
 	ListInboxNotificationsResponse,
 	UpdateInboxNotificationReadStatusResponse,
 } from "#/api/typesGenerated";
-import { useEffectEvent } from "#/hooks/hookPolyfills";
 import { InboxPopover } from "./InboxPopover";
 
 const NOTIFICATIONS_QUERY_KEY = ["notifications"];
@@ -86,7 +85,7 @@ export const NotificationsInbox: FC<NotificationsInboxProps> = ({
 		});
 
 		return () => socket.close();
-	}, [updateNotificationsCache]);
+	}, []);
 
 	const {
 		mutate: loadMoreNotifications,

site/src/modules/resources/useAgentContainers.ts

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useEffectEvent } from "react";
 import { useQuery, useQueryClient } from "react-query";
 import { toast } from "sonner";
 import { watchAgentContainers } from "#/api/api";
@@ -11,7 +11,6 @@ import type {
 	WorkspaceAgentDevcontainer,
 	WorkspaceAgentListContainersResponse,
 } from "#/api/typesGenerated";
-import { useEffectEvent } from "#/hooks/hookPolyfills";
 
 export function useAgentContainers(
 	agent: WorkspaceAgent,
@@ -59,13 +58,7 @@ export function useAgentContainers(
 		});
 
 		return () => socket.close();
-	}, [
-		agent.id,
-		agent.status,
-		queryIsLoading,
-		queryError,
-		updateDevcontainersCache,
-	]);
+	}, [agent.id, agent.status, queryIsLoading, queryError]);
 
 	return devcontainers;
 }

site/src/modules/templates/useWatchVersionLogs.ts

@@ -1,7 +1,6 @@
-import { useEffect, useState } from "react";
+import { useEffect, useEffectEvent, useState } from "react";
 import { watchBuildLogsByTemplateVersionId } from "#/api/api";
 import type { ProvisionerJobLog, TemplateVersion } from "#/api/typesGenerated";
-import { useEffectEvent } from "#/hooks/hookPolyfills";
 export const useWatchVersionLogs = (
 	templateVersion: TemplateVersion | undefined,
 	options?: { onDone: () => Promise<unknown> },
@@ -14,7 +13,7 @@ export const useWatchVersionLogs = (
 		setLogs([]);
 	}
 
-	const stableOnDone = useEffectEvent(() => options?.onDone());
+	const onDoneEvent = useEffectEvent(() => options?.onDone());
 	const status = templateVersion?.job.status;
 	const canWatch = status === "running" || status === "pending";
 	useEffect(() => {
@@ -24,14 +23,14 @@ export const useWatchVersionLogs = (
 
 		const socket = watchBuildLogsByTemplateVersionId(templateVersionId, {
 			onError: (error) => console.error(error),
-			onDone: stableOnDone,
+			onDone: onDoneEvent,
 			onMessage: (newLog) => {
 				setLogs((current) => [...(current ?? []), newLog]);
 			},
 		});
 
 		return () => socket.close();
-	}, [stableOnDone, canWatch, templateVersionId]);
+	}, [canWatch, templateVersionId]);
 
 	return logs;
 };

site/src/modules/terminal/WorkspaceTerminal.tsx

@@ -9,6 +9,7 @@ import {
 	type Ref,
 	useCallback,
 	useEffect,
+	useEffectEvent,
 	useId,
 	useImperativeHandle,
 	useRef,
@@ -20,7 +21,6 @@ import {
 	WebsocketBuilder,
 	WebsocketEvent,
 } from "websocket-ts";
-import { useEffectEvent } from "#/hooks/hookPolyfills";
 import { useClipboard } from "#/hooks/useClipboard";
 import { cn } from "#/utils/cn";
 import { terminalWebsocketUrl } from "#/utils/terminal";
@@ -121,7 +121,7 @@ export const WorkspaceTerminal = ({
 				width: terminal.cols,
 			};
 		},
-		[reportTerminalError],
+		[],
 	);
 
 	const refit = useCallback(() => {
@@ -261,10 +261,8 @@ export const WorkspaceTerminal = ({
 	}, [
 		hasBeenVisible,
 		copyToClipboard,
-		handleOpenLink,
 		refit,
 		renderer,
-		reportTerminalError,
 		terminalFontFamily,
 		backgroundColor,
 	]);
@@ -462,13 +460,11 @@ export const WorkspaceTerminal = ({
 		containerUser,
 		errorMessage,
 		getTerminalDimensions,
-		handleStatusChange,
 		initialCommand,
 		loading,
 		operatingSystem,
 		reconnectionToken,
 		refit,
-		reportTerminalError,
 		terminal,
 	]);