Create new reusable id-based cache for CellMeasurer

The default cache for CellMeasurer currently stores sizes using indices. It should be possible to store these values using (data) ids instead so that changes to the underlying data (eg sorting, new rows appended) wouldn’t invalidate the cached sizes. This would be useful for things like reverse-ordered lists (eg chat).

cc @zsherman

[m0xx]

I had some performance issue with the CellMeasurer for highly dynamic row height. So i’ve come up with a simple solution(key based caching) that seemed to resolve also this issue.

I wanted to use the CellMeasurer to calculate the dynamic height but only when a similar row hasn’t been computed yet. For example let’s say that each row has 0…n child I could use the child count as my key and still benefits from the CellMeasurer to measure all my item + padding/margin.

If someone is interested here is my implementation:

export default class KeyBasedCellSizeCache {
  constructor ({
      buildColumnKey = (index) => (0),
      buildRowKey = (index) => (0)
    } = {}) {
    this._buildColumnKey = buildColumnKey;
    this._buildRowKey = buildRowKey;

    this._keyByRowIndex = {}
    this._keyByColumnIndex = {}

    this._heightByRowKey = {}
    this._widthByColKey = {}
  }

  clearAllColumnWidths () {
    this._keyByRowIndex = {}
  }

  clearAllRowHeights () {
    this._keyByRowIndex = {}
  }

  clearColumnWidth (index) {
    delete this._keyByColumnIndex[index]
  }

  clearRowHeight (index) {
    delete this._keyByRowIndex[index]
  }

  getColumnWidth (index) {
    return this._widthByColKey[this.getColumnKey(index)]
  }

  getRowHeight (index) {
    return this._heightByRowKey[this.getRowKey(index)]
  }

  setColumnWidth (index, width) {
    this._widthByColKey[this.getColumnKey(index)] = width
  }

  setRowHeight (index, height) {
    this._heightByRowKey[this.getRowKey(index)] = height
  }

  getRowKey(index) {
    if(!this._keyByRowIndex[index]) {
      this._keyByRowIndex[index] = this._buildRowKey(index)
    }

    return this._keyByRowIndex[index]
  }

  getColumnKey(index) {
    if(!this._keyByColumnIndex[index]) {
      this._keyByColumnIndex[index] = this._buildColumnKey(index)
    }

    return this._keyByColumnIndex[index]
  }
}

And thanks for this awesome library!

[zsherman]

Yep, we’re using this strategy right now without CellMeasurer, just using our own cache and passing heights straight to List. Having this baked in would be awesome though…