Optimize SMI-Table Rendering Performance

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:

• Host OS:
• Browser:

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.