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.

StackOverMySoul · Accepted Answer · 2016-08-25 15:42:00Z

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, 2016 at 15:42

StackOverMySoul

2,0371 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ilya Lopukhin Over a year ago

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.

juanra · Accepted Answer · 2016-08-25 16:46:45Z

0

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.

answered Aug 25, 2016 at 16:46

juanra

1,66219 silver badges18 bronze badges

2 Comments

Ilya Lopukhin Over a year ago

No it won't work unfortunately because at the mount stage, table component don't have a populated columnList nor other important props.

juanra Over a year ago

Then, maybe you could add a wrapper component that only render the table when you have the data available the first time.

Collectives™ on Stack Overflow

Optimize rendering loads of components in react

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related