In my React Typescript project, I’m using the antd’s Table component. I’m using the same component for hundred of different tables.

I wanted to add a icon to the some of the cells, for this cause, I decided to use the column.render functionality of the antd. Using render, I’m checking if that cell suppose to get an icon, if so I’m adding that icon. But the issue is due to re-renders, it extremely slow downs my web site.

You can see the part that I defined my column.render below.

    const localizedColumns = useMemo(() => {
    ..
    ...
        newCol.render = (text: string, record: any) => {
            if(attributeNotes?.[record.id] && attributeNotes[record.id].some(e=> e.attribute_name == oldTitle) ){
                return (
                    <span>
                {text}
                        <Tooltip title={attributeNotes[record.id].find(e=> e.attribute_name == oldTitle)?.note}>
                                <InfoCircleOutlined style={{ marginLeft: 8 }} />
                            </Tooltip>
            </span>
                );
            }else {
                return (<span>
                {text}
            </span>)
            }
        };
        newCol.shouldCellUpdate= (record:any, prevRecord:any) => !shallowEqual(record, prevRecord);
            newColumns.push(newCol)
        });

        return newColumns;
    }, [columns, data, entityName, columnDescriptions, attributeNotes, onPinColumn]);

I tried to use the useMemo and shouldCellUpdate to increase the performanc, but they did not make any change. Is there way to increase the performance, or a better way to add these icons?