title: react-table keeps re-rendering unchanged cells
body: <p>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.</p>
  
  <p>As seen in the video, name and debt TDs keep updating, even though their values are static.</p>
  
  <p><a href="https://i.imgur.com/2KkNs9f.mp4" rel="nofollow noreferrer">https://i.imgur.com/2KkNs9f.mp4</a></p>
  
  <p>I imagine, that may impact performance on larger tables. </p>
  
  <p>Is there any fix? Or am I doing anything wrong?</p>
  
  <p>Thanks.</p>
  
  <p>Edit:</p>
  
  <p>Code has been requested. Not much to show, basically everything done as in documentation.</p>
  
  <p>Rendering part:</p>
  
  <pre><code>render(){
  
  const columns = [
        {
          Header: "Name",
          accessor: "name",
          className: css.cell,
          headerClassName: css.cell,
          filterMethod: (filter, row) =&gt; {
            return row[filter.id]
              .toLowerCase()
              .includes(filter.value.toLowerCase());
          },
          Cell: props =&gt; {
            return &lt;span&gt;{props.value}&lt;/span&gt;;
          }
        },
        {
          Header: "Tc",
          accessor: d =&gt; {
            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 =&gt; {
            return &lt;ArrowTime lastChange={props.value}&gt;&lt;/ArrowTime&gt;;
          },
          headerClassName: css.cell,
          className: css.cell
        },
        {
          Header: "Debt",
          accessor: d =&gt; Number(d.lastDebt),
          id: "lastDebt",
          headerClassName: css.cell,
  
          className: css.cell,
          Cell: props =&gt; {
            return &lt;span className="number"&gt;{props.value}&lt;/span&gt;;
          },
          getProps: (state, rowInfo, column) =&gt; {
            return {
              style: {
                background: rowInfo ? this.getColor(rowInfo.row.lastDebt) : null
              }
            };
          }
        }
      ];
       return (
            &lt;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) =&gt; {
                return {
                  className: rowInfo ? css.subRow : ""
                };
              }}
              getTrGroupProps={(state, rowInfo) =&gt; {
                return {
                  className: rowInfo ? css.row : ""
                };
              }}
              getTbodyProps={props =&gt; {
                return {
                  className: props ? css.tbody : ""
                };
              }}
              getTheadProps={props =&gt; {
                return {
                  className: props ? css.thead : ""
                };
              }}
              defaultSorted={[
                {
                  id: "lastDebt",
                  desc: true
                }
              ]}
            /&gt;
          );
  }
  </code></pre>