react-table keeps re-rendering unchanged cells

问题

I am using react-table plugin, and my cells keep re-rendering while I am changing the applied searching filter even though their values aren't changed.

As seen in the video, name and debt TDs keep updating, even though their values are static.

https://i.imgur.com/2KkNs9f.mp4

I imagine, that may impact performance on larger tables.

Is there any fix? Or am I doing anything wrong?

Thanks.

Edit:

Code has been requested. Not much to show, basically everything done as in documentation.

Rendering part:

render(){

const columns = [
      {
        Header: "Name",
        accessor: "name",
        className: css.cell,
        headerClassName: css.cell,
        filterMethod: (filter, row) => {
          return row[filter.id]
            .toLowerCase()
            .includes(filter.value.toLowerCase());
        },
        Cell: props => {
          return <span>{props.value}</span>;
        }
      },
      {
        Header: "Tc",
        accessor: d => {
          const date = d.lastChange;

          if (date.length) {
            const s = date.split(" ");
            const s2 = s[0].split("/");
            const mdy = [s2[1], s2[0], s2[2]].join("/");
            const his = s[1];
            return Date.parse(mdy + " " + his);
          }
          return "";
        },
        id: "lastChange",
        Cell: props => {
          return <ArrowTime lastChange={props.value}></ArrowTime>;
        },
        headerClassName: css.cell,
        className: css.cell
      },
      {
        Header: "Debt",
        accessor: d => Number(d.lastDebt),
        id: "lastDebt",
        headerClassName: css.cell,

        className: css.cell,
        Cell: props => {
          return <span className="number">{props.value}</span>;
        },
        getProps: (state, rowInfo, column) => {
          return {
            style: {
              background: rowInfo ? this.getColor(rowInfo.row.lastDebt) : null
            }
          };
        }
      }
    ];
     return (
          <ReactTable
            data={this.props.table}
            columns={columns}
            minRows={0}
            showPagination={false}
            NoDataComponent={CustomNoDataComponent}
            className={css.table}
            resizable={false}
            filtered={[{ id: "name", value: this.props.filter }]}
            getTrProps={(state, rowInfo) => {
              return {
                className: rowInfo ? css.subRow : ""
              };
            }}
            getTrGroupProps={(state, rowInfo) => {
              return {
                className: rowInfo ? css.row : ""
              };
            }}
            getTbodyProps={props => {
              return {
                className: props ? css.tbody : ""
              };
            }}
            getTheadProps={props => {
              return {
                className: props ? css.thead : ""
              };
            }}
            defaultSorted={[
              {
                id: "lastDebt",
                desc: true
              }
            ]}
          />
        );
}

来源：https://stackoverflow.com/questions/58858175/react-table-keeps-re-rendering-unchanged-cells

标签

reactjs

performance

rendering

react-table