perf(site): fix compiler memoization gap in AgentDetailInput#23683
Merged
perf(site): fix compiler memoization gap in AgentDetailInput#23683
Conversation
6c278bf to
2c71222
Compare
DanielleMaywood
approved these changes
Mar 26, 2026
Contributor
DanielleMaywood
left a comment
There was a problem hiding this comment.
I don't think we need to merge the test
The React Compiler failed to memoize the messages derivation chain because a useDashboard() hook call sat between the messages computation and its consumer (getLatestContextUsage). An IIFE around the context usage logic also fragmented the dependency chain. Replacing the IIFE with a ternary and reordering the non-hook computation before the hook call lets the compiler group messages + getLatestContextUsage into a single cache guard keyed on messagesByID and orderedMessageIDs.
2c71222 to
6c27fb2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
In
AgentDetailInput, the React Compiler failed to memoize the messagesderivation chain (
orderedMessageIDs.map().filter()andgetLatestContextUsage(messages)). Two source patterns prevented thecompiler from grouping them into a single cache guard:
A
useDashboard()hook call between themessagescomputation and itsconsumer (
getLatestContextUsage). Hooks must be called unconditionally,so the compiler cannot wrap non-hook computations in a conditional guard
when a hook sits between them.
An IIFE around the context usage logic, which the compiler lowers into a
bb0:block withbreak, fragmenting the dependency chain.The identical pattern in
AgentDetailTimeline(same file) compiledcorrectly because its derivation chain has no hook calls or IIFEs between
steps.
Fix
Replace the IIFE with a ternary and reorder the non-hook computation
(
rawUsage,latestContextUsage) before theuseDashboard()call. Thislets the compiler group the entire chain into one cache guard keyed on
messagesByIDandorderedMessageIDs.Proof
Cache guard simulation test in
chatHelpers.test.tsmeasures guard misscounts across 10 renders with stable message data:
messagesByID+orderedMessageIDs)The test first proves the precondition:
getLatestContextUsagealwaysreturns a fresh object reference even when values are identical. Without the
compiler guard, every render produces a new
rawUsageref, which cascadesinto a new
latestContextUsage, which misses the 34-depAgentChatInputJSX guard.
Compiled output confirms the guard structure: