From 6d1770a309ae7ab10a37dd4257f3260dfe56a8a6 Mon Sep 17 00:00:00 2001 From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com> Date: Fri, 16 Oct 2026 21:32:04 -0700 Subject: [PATCH] perf(web): the open panel pull request URL hook compiles without manual memoization Co-Authored-By: Claude Opus 5.5 --- .../src/hooks/useOpenPanelPullRequestUrl.ts | 71 +++++++++++-------- 1 file changed, 42 insertions(+), 29 deletions(-) diff --git a/apps/web/src/hooks/useOpenPanelPullRequestUrl.ts b/apps/web/src/hooks/useOpenPanelPullRequestUrl.ts index 6719eaf89e40..a880c2f8fb4d 100644 --- a/apps/web/src/hooks/useOpenPanelPullRequestUrl.ts +++ b/apps/web/src/hooks/useOpenPanelPullRequestUrl.ts @@ -1,6 +1,5 @@ import { scopeProjectRef } from "@t3tools/client-runtime/environment"; import { EnvironmentId, ProjectId, type ScopedThreadRef } from "@t3tools/contracts"; -import { useMemo } from "react"; import { readPullRequestDetailSnapshot, @@ -14,6 +13,35 @@ import { pullRequestEnvironment } from "../state/pullRequests"; import { useEnvironmentQuery } from "../state/query"; import { useSupportsMultiplePullRequests } from "./useSupportsMultiplePullRequests"; +type PanelPullRequestSurface = Extract< + NonNullable>, + { kind: "pull-request" } +>; + +// The reference keys the detail query atom, so it must keep its identity across renders. +function usePanelPullRequestReference( + requestedReference: PanelPullRequestSurface | null, + supportsMultiplePullRequests: boolean, + repositoryIdentity: Parameters[1], +) { + "use memo"; + if (requestedReference === null) return null; + const input = { + projectId: ProjectId.make(requestedReference.projectId), + repository: requestedReference.repository, + number: requestedReference.number, + }; + return supportsMultiplePullRequests + ? resolvePullRequestReferenceHost( + { + ...input, + ...(requestedReference.host === undefined ? {} : { host: requestedReference.host }), + }, + repositoryIdentity, + ) + : input; +} + export function useOpenPanelPullRequestUrl(threadRef: ScopedThreadRef | null) { const surface = useRightPanelStore((state) => selectActiveRightPanelSurface(state.byThreadKey, threadRef), @@ -28,23 +56,11 @@ export function useOpenPanelPullRequestUrl(threadRef: ScopedThreadRef | null) { ? scopeProjectRef(environmentId, ProjectId.make(requestedReference.projectId)) : null, ); - const reference = useMemo(() => { - if (requestedReference === null) return null; - const input = { - projectId: ProjectId.make(requestedReference.projectId), - repository: requestedReference.repository, - number: requestedReference.number, - }; - return supportsMultiplePullRequests - ? resolvePullRequestReferenceHost( - { - ...input, - ...(requestedReference.host === undefined ? {} : { host: requestedReference.host }), - }, - project?.repositoryIdentity, - ) - : input; - }, [requestedReference, supportsMultiplePullRequests, project?.repositoryIdentity]); + const reference = usePanelPullRequestReference( + requestedReference, + supportsMultiplePullRequests, + project?.repositoryIdentity, + ); const detail = useEnvironmentQuery( reference && environmentId ? pullRequestEnvironment.detail({ @@ -53,17 +69,14 @@ export function useOpenPanelPullRequestUrl(threadRef: ScopedThreadRef | null) { }) : null, ).data; - const cachedDetail = useMemo( - () => - reference && environmentId - ? readPullRequestDetailSnapshot( - typeof window === "undefined" ? undefined : window.localStorage, - environmentId, - reference, - ) - : null, - [environmentId, reference], - ); + const cachedDetail = + reference && environmentId + ? readPullRequestDetailSnapshot( + typeof window === "undefined" ? undefined : window.localStorage, + environmentId, + reference, + ) + : null; return reference ? (resolveDisplayedPullRequestDetail({ live: detail, cached: cachedDetail, reference })?.url ?? requestedReference?.url ??