T
TanStack•9mo ago
sunny-green

React memo with Row selection

Hi folks, I need your help with memorization cells. I've wrapped cell with React.memo to prevent re-rendering on every render. 
cell: memo(({ row }) => (
    <div className="flex items-center">
        <Checkbox
            checked={row.getIsSelected()}
            onCheckedChange={value => row.toggleSelected(!!value)}
        />
    </div>
),
(oldProps, newProps) => oldProps.row.getIsSelected() === newProps.row.getIsSelected()
),
cell: memo(({ row }) => (
    <div className="flex items-center">
        <Checkbox
            checked={row.getIsSelected()}
            onCheckedChange={value => row.toggleSelected(!!value)}
        />
    </div>
),
(oldProps, newProps) => oldProps.row.getIsSelected() === newProps.row.getIsSelected()
),
Now oldProps.row.getIsSelected() === newProps.row.getIsSelected() is always true. I think it's because getIsSelected method returns state of table. How can I rerender this select cell only when selected is changed?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?