TanStackT
TanStack•14mo ago
dramatic-maroon

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()
),

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?
Was this page helpful?