Description
In src/components/SMI-Table/index.js, the isCollapsed state is managed as a monolithic array residing at the parent Table component level. When a user clicks a table row, the row mutates an indexed element in this array triggering setCollapse([...e]). Because all rows are rendered via an inline mapping function within the parent component, every single click forces React to fully re-render the entire table body. For large tables with numerous complex elements (like Tooltips and Context Providers), this leads to noticeable UI lag.
Expected Behavior
The table's row-rendering logic should be refactored into a separate, lightweight TableRow component wrapped in React.memo(). The isCollapsed state should be pushed down into the individual SmiTableRow components as a simple boolean value (const [isCollapsed, setIsCollapsed] = useState(false)). This will substantially improve Time to Interactive (TTI) and Interaction to Next Paint (INP) for the SMI Table page.
Screenshots
Environment:
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.
Join the Layer5 Community by submitting your community member form.
Description
In
src/components/SMI-Table/index.js, theisCollapsedstate is managed as a monolithic array residing at the parentTablecomponent level. When a user clicks a table row, the row mutates an indexed element in this array triggeringsetCollapse([...e]). Because all rows are rendered via an inline mapping function within the parent component, every single click forces React to fully re-render the entire table body. For large tables with numerous complex elements (like Tooltips and Context Providers), this leads to noticeable UI lag.Expected Behavior
The table's row-rendering logic should be refactored into a separate, lightweight
TableRowcomponent wrapped inReact.memo(). TheisCollapsedstate should be pushed down into the individualSmiTableRowcomponents as a simple boolean value (const [isCollapsed, setIsCollapsed] = useState(false)). This will substantially improve Time to Interactive (TTI) and Interaction to Next Paint (INP) for the SMI Table page.Screenshots
Environment:
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the
masterbranch.