React.memo 组件在预期时重新渲染而不检查 isEquals

Question

Edit: Here is a working example: https://codesandbox.io/s/gracious-silence-5n4pv Why does pressing the button re-render all the cells, but scrolling not?

I'm trying to improve performance, so I've extracted a component into something with simple props that's more React.memo friendly:

interface DataTableCellProps {
  header: string;
  value: string;
  isRepeatedValue: boolean;
  width: number;
}

const DataCell = styled.div<{ width: number; isRepeatedValue: boolean }>`
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  width: ${props => props.width}px;
  color: ${props => (props.isRepeatedValue ? grey : lightGrey)};
  display: flex;
`;

/** Data table cells. A pure component that can be memoised easily (all props are simple types) */
const DataTableCell = React.memo(
  (props: DataTableCellProps) => {
    console.log("Rendering");
    return (
      <DataCell
        role="cell"
        area-header={props.header}
        width={props.width}
        isRepeatedValue={props.isRepeatedValue}
      >
        <Tooltip title={props.value} placement="bottom-start" enterDelay={500}>
          <span className="text-truncate">{props.value}</span>
        </Tooltip>
      </DataCell>
    );
  },
  (a, b) => {
    console.log("Are props equal?");
    return true;
  }
);

It only takes strings, booleans and numbers as an input. But I've added a cusom isEqual check to log, and for now forced it to always say it's equal. By my understanding, it should always return the cached component, and never re-render unless they key changes.

Here's where it's rendered, stripped of everything not functional:

const DataTableBody = (props: DataTableBodyProps) => (<FixedSizeList
          width={300}
          height={300}
          itemCount={props.rows.length}
          itemSize={35}
          outerRef={props.containerRef}
          outerElementType={CustomScrollbarsVirtualList}
        >
          {({ index, style }) => {
            const row = props.rows[index];
            props.prepareRow(row);
            return (
              <div
                style={{
                  ...style,
                  transform: `translate(${props.horizontalScroll}px, 0)`,
                  display: "flex"
                }}
              >
                {row.cells.map((cell: any) => (
                  <DataTableCell
                    key={cell.getCellProps().key}
                    value={cell.value}
                    header={cell.column.Header}
                    width={
                      props.widths[cell.column.Header] ||
                      props.defaultColumnWidth
                    }
                    isRepeatedValue={cell.isRepeatedValue}
                  />
                ))}
              </div>
            );
          }}
        </FixedSizeList>);

I logged the key (from react-tables ), and it is a stable string unique for each cell.

When the prop horizontalScroll in the above example changes, which would change the div 's rendering, but shouldn't affect the DataTableCell as it's not passed in props, and the key hasn't changed - I get the console log Rendering printed out hundreds of time. I don't get Are props equal?

However, it works fine with scrolling the component! When scrolling vertically, the style will be changing, it re-renders, I see a whole load of Are props equal? , but only a handful of Rendering logs. I'm pretty confident the ones with a new key are being rendered, and existing keys are being checked for equality and NOT being rendered.

So why does it not work with horizontalScroll ?

Answer 1

Found a solution. It was react-window. Following their guide and passing itemData prop into the list, and avoiding using external values in the RenderRow prevented it recreating components:

https://react-window.now.sh/#/examples/list/memoized-list-items