Optimize rendering loads of components in react

Question

I'm developing electron-based standalone app with help of React and it envolves tables (many of them). To represent table data i use Facebook`s Fixed Data Table and i find it very efficient as well as overall awesome. The point is that i overbloated it with logic quite too much, so now it lags quite often. One important thing is that data enters FDT in such format:

[ { columnName: value, columnName: value, ... , columnName: value },
  { columnName: value, columnName: value, ... , columnName: value },
  ... ,
  { columnName: value, columnName: value, ... , columnName: value } ]

And FDT works with this data this way:

   |TABLE
   |
   v
    COLUMN
     |     \
     v      v
     CELL  CELL
    __________|
   |
   v
    COLUMN
     |     \
     v      v
     CELL  CELL
    __________|
   |
   v
    COLUMN
     |     \
     v      v
     CELL  CELL

So i have that code to render the table:

 <Table
    rowsCount={rows.size}
    headerHeight={51}
    rowHeight={45}
    width={tableWidth}
    height={tableHeight}
  >
    {columnList.map((column, key) => 
      <Column
        key={key}
        columnKey={key}
        width={100}
        header={
          <SortHeaderCell label={column.columnname} />
        }
        cell={props =>
          <FixedDataTableCellComponent
            columnName={column.columnname}
            row={rows.get(props.rowIndex)}
            {...props}
          />
        }
      />
    )}
  </Table>

And then comes the problem. Every time some thing change, the reducers deliver data to some cells, and thus the whole table have to run this columnList.map thing inside returned render code. I don't know for sure, but i think it causes the lag on tables with a lot of columns specifically.

Would you kindly guys suggest some robust solution to this situation? Thanks in advance.

score 1 · Answer 1 · answered Aug 25 '16 at 15:42

1

Try adding a shouldComponentUpdate in the column component, and check if any of the props have changed, if no change return false;

shouldComponentUpdate: function(nextProps, nextState) {
 // check if data for that column has changed
}

answered Aug 25 '16 at 15:42

StackOverMySoul

1,957
1
13
21

1

I'm pretty much sure columns which don't receive new props don't rerender, and it's already done by the guys from facebook. The problem is the table have to iterate over whole columnList with every small change inside it's children. – Ilya Lopukhin Aug 25 '16 at 15:46

score 0 · Answer 2 · answered Aug 25 '16 at 16:46

I'm not sure, but you could try to run the "columnList.map" in the componentWillMount method (which runs only once). Then the render method would be a bit faster, having a static Column list. I guess this way it would be more similar to the Facebook`s Fixed Data Table examples.

I mean, something like this:

  componentWillMount() {
    const columns = columnList.map( (column, key) => 
      <Column
        key={key}
        columnKey={key}
        width={100}
        header={
          <SortHeaderCell label={column.columnname}/>
        }
        cell={props =>
          <FixedDataTableCellComponent
            columnName={column.columnname}
            row={rows.get(props.rowIndex)}
            {...props}
          />
        }
      />
    );

    //Set default state:
    this.setState({
      columns: columns
    });
  }

  render() {
    const { columns } = this.state;

    <Table
      rowsCount={rows.size}
      headerHeight={51}
      rowHeight={45}
      width={tableWidth}
      height={tableHeight}
    >
    {columns}

    </Table>
  }

I know the difference is subtle, but perhaps it works. It's just an idea.

No it won't work unfortunately because at the mount stage, table component don't have a populated columnList nor other important props. — Ilya Lopukhin, Aug 25 '16 at 17:09
Then, maybe you could add a wrapper component that only render the table when you have the data available the first time. — juanra, Aug 26 '16 at 06:45

Optimize rendering loads of components in react

2 Answers2