Skip to content

fix(smi-table): optimize row rendering with memoized rows#7618

Open
Manishnemade12 wants to merge 1 commit intolayer5io:masterfrom
Manishnemade12:smpt
Open

fix(smi-table): optimize row rendering with memoized rows#7618
Manishnemade12 wants to merge 1 commit intolayer5io:masterfrom
Manishnemade12:smpt

Conversation

@Manishnemade12
Copy link
Copy Markdown

@Manishnemade12 Manishnemade12 commented Apr 11, 2026

Summary

This PR resolves the SMI table rendering performance issue by isolating row rendering and collapse state per row.

Closes : #7613

What changed

  • Refactored table row rendering from inline mapping into a separate TableRow component in src/components/SMI-Table/index.js.
  • Wrapped TableRow with React.memo() to reduce unnecessary row re-renders.
  • Moved collapse state from parent-level array to per-row local state (useState(false)) inside TableRow.
  • Kept existing visual behavior, data display, and tooltip rendering logic unchanged.

Why this improves performance

  • Clicking one row now updates only that row's local state instead of mutating a parent-level collapse array.
  • This avoids forcing a full table body re-render on each row toggle and improves interaction responsiveness for larger datasets.

Scope

  • Single-file, surgical change:
    • src/components/SMI-Table/index.js
  • No unrelated logic or styling changes.

Validation

  • Verified no diagnostics reported for the changed file in editor checks.
  • As requested, no tests were run.

Signed-off-by: Manishnemade12 <mnemade140@gmail.com>
@Manishnemade12
Copy link
Copy Markdown
Author

@rishiraj38 Can you please review this pr

Copy link
Copy Markdown
Member

@rishiraj38 rishiraj38 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch on extracting TableRow to fix the state mutation!

One issue though: dynamically generating the tooltip IDs (react-tooltip-${rowIndex}) broke the tooltips on the checkmarks/crosses since those are still hardcoded to look for react-tooltip. Also, rendering a <Tooltip> component per row can causes severe DOM bloat.

@Manishnemade12
Copy link
Copy Markdown
Author

Manishnemade12 commented Apr 11, 2026

@rishiraj38 following changes i did as per your suggestion

  • Added one shared tooltip ID constant and pointed all tooltip triggers (mesh icon + pass/half/fail cells) to it.
  • Removed per-row Tooltip rendering from TableRow to prevent DOM bloat.
  • Rendered a single Tooltip once at the Table level so all row/cell tooltips resolve consistently.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Optimize SMI-Table Rendering Performance

2 participants