💸 Perf - Early-return ButtonRow before its layout-measuring hooks - #4919
Draft
isaaclombardssw wants to merge 1 commit into
Draft
💸 Perf - Early-return ButtonRow before its layout-measuring hooks#4919isaaclombardssw wants to merge 1 commit into
isaaclombardssw wants to merge 1 commit into
Conversation
ButtonRow ran useResizeObserver and layout reads unconditionally because the empty check lived in the returned JSX, not before the hooks. On the AI for Business Leaders page 13 of 14 button rows have no buttons yet still created a ResizeObserver. Split into an outer ButtonRow that returns null before any hooks when there are no buttons, delegating the measuring logic to a new ButtonRowInner that owns all the hooks and only mounts when buttons exist. Keeps hooks unconditional (Rules of Hooks) and preserves the full-width-button behaviour unchanged. Closes #4900 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Q8genJyZboXaa4vgYhJF4P
Contributor
Coverage report
Test suite run success19 tests passing in 2 suites. Report generated by 🧪jest coverage report action from cde5384 |
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 join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Closes #4900
ButtonRowcalleduseResizeObserverand readclientWidthon every mount because thedata.buttons?.length > 0check lived in the returned JSX, after the hooks. On the AI for Business Leaders page, 13 of the 14 button rows carry no buttons yet each still spun up a ResizeObserver and performed layout reads for a row that renders nothing.Change
Split the component in two, keeping hooks unconditional (Rules of Hooks):
ButtonRowdoes the cheap empty check and returnsnullbefore any hooks whendata.buttonsis empty.ButtonRowInnerowns all the layout-measuring hooks (useResizeObserver, the refs,measure) and only mounts when there are buttons — so its hooks always run in the same order.The full-width-button measuring logic is unchanged; the redundant
data.buttons?.length > 0 &&JSX guard was dropped since the outer guard already guarantees a non-empty array.Verification
npx eslinton the changed file — clean (react-hooks/rules-of-hooks and exhaustive-deps both pass).npx prettier --check— clean.npx tsc --noEmit(with the Tina client generated locally) — no new errors.Acceptance criteria: no ResizeObserver/layout reads when there are no buttons ✅; full-width behaviour preserved where buttons exist ✅; no hooks-order warnings ✅. The full-width behaviour on the hero block at mobile/desktop widths is worth a quick human eyeball since it wasn't runtime-tested here.
🤖 Generated with Claude Code
https://claude.ai/code/session_01Q8genJyZboXaa4vgYhJF4P