Skip to content

Commit 6de88e1

Browse files
perf(web): the settings layout compiles without manual memoization
Co-Authored-By: Claude Opus 5.5 <[email protected]>
1 parent a702563 commit 6de88e1

1 file changed

Lines changed: 42 additions & 49 deletions

File tree

‎apps/web/src/components/settings/settingsLayout.tsx‎

Lines changed: 42 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,8 @@ import {
1010
createContext,
1111
type ComponentPropsWithoutRef,
1212
type ReactNode,
13-
useCallback,
1413
useContext,
1514
useEffect,
16-
useMemo,
1715
useState,
1816
} from "react";
1917

@@ -73,10 +71,7 @@ function SettingsSearchTargetProvider({
7371
onTargetHandled?: () => void;
7472
children: ReactNode;
7573
}) {
76-
const value = useMemo(
77-
() => ({ targetId, highlightTarget, onTargetHandled }),
78-
[highlightTarget, onTargetHandled, targetId],
79-
);
74+
const value = { targetId, highlightTarget, onTargetHandled };
8075
return <SettingsSearchTargetContext value={value}>{children}</SettingsSearchTargetContext>;
8176
}
8277

@@ -113,15 +108,12 @@ export function useSettingsSearchTargetId(): string | null {
113108
export function useSettingsSearchTarget<T extends HTMLElement>(id: string | undefined) {
114109
const { targetId, highlightTarget, onTargetHandled } = useContext(SettingsSearchTargetContext);
115110
const isSearchTarget = id !== undefined && id === targetId;
116-
const targetRef = useCallback(
117-
(target: T | null) => {
118-
if (target && isSearchTarget) {
119-
scrollAndFocusSettingsTarget(target, highlightTarget);
120-
onTargetHandled();
121-
}
122-
},
123-
[highlightTarget, isSearchTarget, onTargetHandled],
124-
);
111+
const targetRef = (target: T | null) => {
112+
if (target && isSearchTarget) {
113+
scrollAndFocusSettingsTarget(target, highlightTarget);
114+
onTargetHandled();
115+
}
116+
};
125117

126118
return targetRef;
127119
}
@@ -237,6 +229,32 @@ export function SettingsUnavailableGroup({
237229
);
238230
}
239231

232+
function projectOverrides(
233+
context: ReturnType<typeof useOptionalSettingsScope>,
234+
scopedKeys: ReadonlyArray<keyof ServerSettings>,
235+
): SettingOverridingProject[] {
236+
if (context === null || scopedKeys.length === 0) return [];
237+
return listProjectOverrides(context.connectedEnvironments, scopedKeys).flatMap((entry) => {
238+
const group = context.groups.find((candidate) =>
239+
candidate.memberProjects.some(
240+
(member) => member.environmentId === entry.environmentId && member.id === entry.projectId,
241+
),
242+
);
243+
if (!group) return [];
244+
return [
245+
{
246+
...entry,
247+
label: group.displayName,
248+
open: () =>
249+
context.selectScope({
250+
project: group.projectKey,
251+
...(context.search.machine ? { machine: context.search.machine } : {}),
252+
}),
253+
},
254+
];
255+
});
256+
}
257+
240258
export function SettingsRow({
241259
title,
242260
description,
@@ -296,39 +314,14 @@ export function SettingsRow({
296314
(environment) => environment.environmentId === context.scope.environmentIds[0],
297315
)?.label ?? "environment")
298316
: "environment";
299-
const environmentSettingsById = useMemo(
300-
() =>
301-
new Map(
302-
(context?.connectedEnvironments ?? []).flatMap((environment) =>
303-
environment.serverConfig
304-
? [[environment.environmentId, environment.serverConfig.settings] as const]
305-
: [],
306-
),
307-
),
308-
[context?.connectedEnvironments],
317+
const environmentSettingsById = new Map(
318+
(context?.connectedEnvironments ?? []).flatMap((environment) =>
319+
environment.serverConfig
320+
? [[environment.environmentId, environment.serverConfig.settings] as const]
321+
: [],
322+
),
309323
);
310-
const overridingProjects = useMemo((): SettingOverridingProject[] => {
311-
if (context === null || isProjectScope || scopedKeys.length === 0) return [];
312-
return listProjectOverrides(context.connectedEnvironments, scopedKeys).flatMap((entry) => {
313-
const group = context.groups.find((candidate) =>
314-
candidate.memberProjects.some(
315-
(member) => member.environmentId === entry.environmentId && member.id === entry.projectId,
316-
),
317-
);
318-
if (!group) return [];
319-
return [
320-
{
321-
...entry,
322-
label: group.displayName,
323-
open: () =>
324-
context.selectScope({
325-
project: group.projectKey,
326-
...(context.search.machine ? { machine: context.search.machine } : {}),
327-
}),
328-
},
329-
];
330-
});
331-
}, [context, isProjectScope, scopedKeys]);
324+
const overridingProjects = isProjectScope ? [] : projectOverrides(context, scopedKeys);
332325
const renderedReset = unavailable ? null : isProjectScope && scopedKeys.length > 0 ? (
333326
source === "project" || source === "mixed" ? (
334327
<SettingResetButton
@@ -520,15 +513,15 @@ export function SettingsPageContainer({
520513
select: (location) => location.state.settingsTargetHighlight !== false,
521514
});
522515
const targetId = hash.replace(/^#/, "") || null;
523-
const clearTargetHash = useCallback(() => {
516+
const clearTargetHash = () => {
524517
void navigate({
525518
hash: "",
526519
replace: true,
527520
resetScroll: false,
528521
hashScrollIntoView: false,
529522
state: { settingsTargetHighlight: true },
530523
});
531-
}, [navigate]);
524+
};
532525

533526
return (
534527
<SettingsSearchTargetProvider

0 commit comments

Comments
 (0)