diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
index aa3b700a2cf43..632b5f0c730ad 100644
--- a/site/src/api/queries/organizations.ts
+++ b/site/src/api/queries/organizations.ts
@@ -270,7 +270,7 @@ export const organizationsPermissions = (
 	}
 
 	return {
-		queryKey: ["organizations", organizationIds.sort(), "permissions"],
+		queryKey: ["organizations", [...organizationIds.sort()], "permissions"],
 		queryFn: async () => {
 			// Only request what we need for the sidebar, which is one edit permission
 			// per sub-link (settings, groups, roles, and members pages) that tells us
@@ -316,7 +316,7 @@ export const workspacePermissionsByOrganization = (
 	}
 
 	return {
-		queryKey: ["workspaces", organizationIds.sort(), "permissions"],
+		queryKey: ["workspaces", [...organizationIds.sort()], "permissions"],
 		queryFn: async () => {
 			const prefixedChecks = organizationIds.flatMap((orgId) =>
 				Object.entries(workspacePermissionChecks(orgId, userId)).map(
diff --git a/site/src/modules/dashboard/Navbar/proxyUtils.tsx b/site/src/modules/dashboard/Navbar/proxyUtils.tsx
index 57afadb7fbdd9..674c62ef38f1e 100644
--- a/site/src/modules/dashboard/Navbar/proxyUtils.tsx
+++ b/site/src/modules/dashboard/Navbar/proxyUtils.tsx
@@ -4,7 +4,7 @@ export function sortProxiesByLatency(
 	proxies: Proxies,
 	latencies: ProxyLatencies,
 ) {
-	return proxies.toSorted((a, b) => {
+	return [...proxies].sort((a, b) => {
 		const latencyA = latencies?.[a.id]?.latencyMS ?? Number.POSITIVE_INFINITY;
 		const latencyB = latencies?.[b.id]?.latencyMS ?? Number.POSITIVE_INFINITY;
 		return latencyA - latencyB;
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/utils.ts b/site/src/modules/workspaces/WorkspaceTiming/Chart/utils.ts
index 9721e9f0d1317..45c6f5bf681d1 100644
--- a/site/src/modules/workspaces/WorkspaceTiming/Chart/utils.ts
+++ b/site/src/modules/workspaces/WorkspaceTiming/Chart/utils.ts
@@ -13,9 +13,9 @@ export const mergeTimeRanges = (ranges: TimeRange[]): TimeRange => {
 		.sort((a, b) => a.startedAt.getTime() - b.startedAt.getTime());
 	const start = sortedDurations[0].startedAt;
 
-	const sortedEndDurations = ranges
-		.slice()
-		.sort((a, b) => a.endedAt.getTime() - b.endedAt.getTime());
+	const sortedEndDurations = [...ranges].sort(
+		(a, b) => a.endedAt.getTime() - b.endedAt.getTime(),
+	);
 	const end = sortedEndDurations[sortedEndDurations.length - 1].endedAt;
 	return { startedAt: start, endedAt: end };
 };
diff --git a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
index f242f13d429fa..ade9bf5f9df52 100644
--- a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
+++ b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
@@ -26,7 +26,7 @@ const sortVisibleTemplates = (templates: TemplateExample[]) => {
 	// The docker template should be the first template in the list,
 	// as it's the easiest way to get started with Coder.
 	const dockerTemplateId = "docker";
-	return templates.sort((a, b) => {
+	return [...templates].sort((a, b) => {
 		if (a.id === dockerTemplateId) {
 			return -1;
 		}
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
index 589a693d44dd8..c4152c7b8f565 100644
--- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
@@ -99,7 +99,7 @@ const LicensesSettingsPageView: FC<Props> = ({
 
 				{!isLoading && licenses && licenses?.length > 0 && (
 					<Stack spacing={4} className="licenses">
-						{licenses
+						{[...(licenses ?? [])]
 							?.sort(
 								(a, b) =>
 									new Date(b.claims.license_expires).valueOf() -
diff --git a/site/src/pages/HealthPage/DERPPage.tsx b/site/src/pages/HealthPage/DERPPage.tsx
index 3daa403c99f36..b866bc9b01210 100644
--- a/site/src/pages/HealthPage/DERPPage.tsx
+++ b/site/src/pages/HealthPage/DERPPage.tsx
@@ -91,7 +91,7 @@ export const DERPPage: FC = () => {
 				<section>
 					<SectionLabel>Regions</SectionLabel>
 					<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
-						{Object.values(regions!)
+						{Object.values(regions ?? {})
 							.filter((region) => {
 								// Values can technically be null
 								return region !== null;
diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
index dfbfa5029cbde..d6af718cd1a8b 100644
--- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
@@ -170,8 +170,8 @@ const RoleTable: FC<RoleTableProps> = ({
 					</Cond>
 
 					<Cond>
-						{roles
-							?.sort((a, b) => a.name.localeCompare(b.name))
+						{[...(roles ?? [])]
+							.sort((a, b) => a.name.localeCompare(b.name))
 							.map((role) => (
 								<RoleRow
 									key={role.name}
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index 097b8fce513e7..33711e98e2f0f 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -412,7 +412,9 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 	...panelProps
 }) => {
 	const theme = useTheme();
-	const validUsage = data?.filter((u) => u.seconds > 0);
+	const validUsage = data
+		?.filter((u) => u.seconds > 0)
+		.sort((a, b) => b.seconds - a.seconds);
 	const totalInSeconds =
 		validUsage?.reduce((total, usage) => total + usage.seconds, 0) ?? 1;
 	const usageColors = chroma
@@ -438,86 +440,82 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 							gap: 24,
 						}}
 					>
-						{validUsage
-							.sort((a, b) => b.seconds - a.seconds)
-							.map((usage, i) => {
-								const percentage = (usage.seconds / totalInSeconds) * 100;
-								return (
-									<div
-										key={usage.slug}
-										css={{ display: "flex", gap: 24, alignItems: "center" }}
-									>
+						{validUsage.map((usage, i) => {
+							const percentage = (usage.seconds / totalInSeconds) * 100;
+							return (
+								<div
+									key={usage.slug}
+									css={{ display: "flex", gap: 24, alignItems: "center" }}
+								>
+									<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
 										<div
-											css={{ display: "flex", alignItems: "center", gap: 8 }}
-										>
-											<div
-												css={{
-													width: 20,
-													height: 20,
-													display: "flex",
-													alignItems: "center",
-													justifyContent: "center",
-												}}
-											>
-												<img
-													src={usage.icon}
-													alt=""
-													style={{
-														objectFit: "contain",
-														width: "100%",
-														height: "100%",
-													}}
-												/>
-											</div>
-											<div css={{ fontSize: 13, fontWeight: 500, width: 200 }}>
-												{usage.display_name}
-											</div>
-										</div>
-										<Tooltip
-											title={`${Math.floor(percentage)}%`}
-											placement="top"
-											arrow
+											css={{
+												width: 20,
+												height: 20,
+												display: "flex",
+												alignItems: "center",
+												justifyContent: "center",
+											}}
 										>
-											<LinearProgress
-												value={percentage}
-												variant="determinate"
-												css={{
+											<img
+												src={usage.icon}
+												alt=""
+												style={{
+													objectFit: "contain",
 													width: "100%",
-													height: 8,
-													backgroundColor: theme.palette.divider,
-													"& .MuiLinearProgress-bar": {
-														backgroundColor: usageColors[i],
-														borderRadius: 999,
-													},
+													height: "100%",
 												}}
 											/>
-										</Tooltip>
-										<Stack
-											spacing={0}
+										</div>
+										<div css={{ fontSize: 13, fontWeight: 500, width: 200 }}>
+											{usage.display_name}
+										</div>
+									</div>
+									<Tooltip
+										title={`${Math.floor(percentage)}%`}
+										placement="top"
+										arrow
+									>
+										<LinearProgress
+											value={percentage}
+											variant="determinate"
 											css={{
-												fontSize: 13,
-												color: theme.palette.text.secondary,
-												width: 120,
-												flexShrink: 0,
-												lineHeight: "1.5",
+												width: "100%",
+												height: 8,
+												backgroundColor: theme.palette.divider,
+												"& .MuiLinearProgress-bar": {
+													backgroundColor: usageColors[i],
+													borderRadius: 999,
+												},
 											}}
-										>
-											{formatTime(usage.seconds)}
-											{usage.times_used > 0 && (
-												<span
-													css={{
-														fontSize: 12,
-														color: theme.palette.text.disabled,
-													}}
-												>
-													Opened {usage.times_used.toLocaleString()}{" "}
-													{usage.times_used === 1 ? "time" : "times"}
-												</span>
-											)}
-										</Stack>
-									</div>
-								);
-							})}
+										/>
+									</Tooltip>
+									<Stack
+										spacing={0}
+										css={{
+											fontSize: 13,
+											color: theme.palette.text.secondary,
+											width: 120,
+											flexShrink: 0,
+											lineHeight: "1.5",
+										}}
+									>
+										{formatTime(usage.seconds)}
+										{usage.times_used > 0 && (
+											<span
+												css={{
+													fontSize: 12,
+													color: theme.palette.text.disabled,
+												}}
+											>
+												Opened {usage.times_used.toLocaleString()}{" "}
+												{usage.times_used === 1 ? "time" : "times"}
+											</span>
+										)}
+									</Stack>
+								</div>
+							);
+						})}
 					</div>
 				)}
 			</PanelContent>
diff --git a/site/src/pages/WorkspacePage/AppStatuses.tsx b/site/src/pages/WorkspacePage/AppStatuses.tsx
index cee2ed33069ae..95afb422de30b 100644
--- a/site/src/pages/WorkspacePage/AppStatuses.tsx
+++ b/site/src/pages/WorkspacePage/AppStatuses.tsx
@@ -165,7 +165,8 @@ export const AppStatuses: FC<AppStatusesProps> = ({
 		})),
 	);
 
-	// 2. Sort statuses chronologically (newest first)
+	// 2. Sort statuses chronologically (newest first) - mutating the value is
+	// fine since it's not an outside parameter
 	allStatuses.sort(
 		(a, b) =>
 			new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),