perf: hoist inline style objects out of RegistryTable render path (#386) - #529
Conversation
…liobond#386) Static style objects were being constructed on every render inside RegistryTable, Th, Row, and ScoreField, defeating React.memo bail-outs. - Hoist wrapper div style to scrollWrapStyle - Hoist last <th> spread to thActions - Replace Th button/label/indicator inline objects with stable thBtnLeft/thBtnRight and active/inactive style pairs - Hoist all Row inline objects (rowBorderStyle, nameStyle, locationStyle, tdNumStyle, tdLastVerifiedStyle, tdActionsStyle, editingRowStyle, editingCellStyle, editorFlexStyle, reVerifySpanStyle, btnGroupStyle) - Hoist ScoreField label style to scoreLabelStyle Closes Heliobond#386
|
@aristotle224 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
|
@aristotle224 is attempting to deploy a commit to the David Dada's projects Team on Vercel. A member of the Team first needs to authorize it. |
sshdopey
left a comment
sshdopey
left a comment
There was a problem hiding this comment.
This is a solid, focused change that directly addresses the linked issue by hoisting static style objects out of the render path in RegistryTable. The refactor is clean and preserves visual output exactly. Nice work on splitting dynamic style pairs for active/inactive states too! Keep up the great contributions! ❤️
|
Approved! 🎉 I couldn't auto-merge this just yet (it may need a rebase or have a check still running). A maintainer can merge it whenever it's ready. |
3 participants
Summary
Closes #386
Static style objects were constructed on every render inside
RegistryTable,Th,Row, andScoreField, producing a new objectreference each time and defeating
React.memobail-outs on list rows.All static style objects are now module-level constants. Dynamic style
selection (e.g. active/inactive sort indicator colour in
Th) usespre-built stable object pairs chosen by a conditional, rather than
constructing a new object per render.
Changes
scrollWrapStyle— hoisted wrapper div stylethActions— hoisted last spreadthBtnLeft/thBtnRight— hoisted Th button styles (split by align)thLabelActive/Inactive,thIndicatorActive/Inactive— stable pairs replacing inline objectsrowBorderStyle,nameStyle,locationStyle,tdNumStyle,tdLastVerifiedStyle,tdActionsStyle— hoisted Row cell styles (pre-merged spreads)editingRowStyle,editingCellStyle,editorFlexStyle,reVerifySpanStyle,btnGroupStyle— hoisted editor sub-row stylesscoreLabelStyle— hoisted ScoreField label styleNo behaviour change — visual output is identical.