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

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

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?

TanStack•16mo 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()
),

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

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?

React memo with Row selection

Similar Threads

React memo with Row selection

Similar Threads

Similar Threads

Similar Threads