fix(smi-table): optimize row rendering with memoized rows#7618
fix(smi-table): optimize row rendering with memoized rows#7618Manishnemade12 wants to merge 3 commits intolayer5io:masterfrom
Conversation
Signed-off-by: Manishnemade12 <mnemade140@gmail.com>
|
@rishiraj38 Can you please review this pr |
rishiraj38
left a comment
There was a problem hiding this comment.
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.
|
@rishiraj38 following changes i did as per your suggestion
|
Signed-off-by: Manishnemade12 <mnemade140@gmail.com>
rishiraj38
left a comment
There was a problem hiding this comment.
Nice work! 👍 This makes a lot of sense — moving the collapse state into each row instead of keeping it all at the parent level should fix that laggy feeling when clicking through large tables.
|
@Manishnemade12 did you get any input from today meeting? |
|
@saurabhraghuvanshii i addressed your all comments , please take review once |
Summary
This PR resolves the SMI table rendering performance issue by isolating row rendering and collapse state per row.
Closes : #7613
What changed
TableRowcomponent insrc/components/SMI-Table/index.js.TableRowwithReact.memo()to reduce unnecessary row re-renders.useState(false)) insideTableRow.Why this improves performance
Scope
src/components/SMI-Table/index.jsValidation