Documentation for Collection could be corrected and/or clearer w/r/t recomputeCellSizesAndPositions

[jasongonzales23]

I needed a hack/workaround to get my collection to update even though the length of it hadn't changed.

On the home page of the repo it states you can use forceUpdate as a public method on the Collection component. I couldn't get this to work. Does it still work or is that part of the documentation out of date?

On the docs for the Collection component it states you can force an update by calling recomputeCellSizesAndPositions as a public method. That said, it wasn't obvious to me how to do this (as this notion of a public method isn't terribly idiomatic to React Components). After digging for quite a while I learned that you do it like so:

<Collection
    ref={ref => this._collection = ref}
   ...
/>

And then wherever you need to force a render:

componentWillReceiveProps() {
    if (this._collection) {
        this._collection.recomputeCellSizesAndPositions()
    }
}

I'll be happy to make this change in a PR as soon as I have a moment if you like.

Cheers!

[bvaughn]

I think refs are explained reasonably clearly in the official React docs. Their use is probably not super common, but they are common enough for things like focus management, animations, 3rd party libraries (like react-virtualized). I'm wary of duplicating the official docs too much here because I won't be able to keep them in sync.

componentWillReceiveProps(nextProps) {
    if (this._shouldCellsRemeasure(nextProps)) {
      // Your data has changed in a way that affects the size or position of cells.
      // This is an expensive operation; don't do it unless you need to.
      // recomputeCellSizesAndPositions() itself is defined on the Collection component.
      this._collection.recomputeCellSizesAndPositions()
    } else if (this._shouldCellsRedraw(nextProps)) {
      // Your data has changed in a way that requires one or more cells to re-draw.
      // Cell sizes and positions are still valid.
      // This is a relatively cheap operation.
      // forceUpdate() is a built-in method available to all React components.
      this._collection.forceUpdate()
    }
}

render () {
  return (
    <Collection
      ref={ref => this._collection = ref}
      {...this.props}
    />
  )
}

That being said, it's likely that calling forceUpdate on Collection doesn't work because it doesn't force the inner CollectionView to re-render. This is probably an oversight. If you'd be interested in contributing a PR to fix this I would be happy to review it. I do a similar pass-thru thing for components like List.

[jasongonzales23]

Hey @bvaughn, I take your point about refs, but I guess I should have been clearer. It wasn't obvious to me when the docs said that this was a public method that that meant you needed to create a ref in order to be able to apply that method. I use refs all the time and understand how they work, I just hadn't really ever heard the term 'public method' applied to calling a function on a ref. It makes sense now that I think of it. I wonder if others would wonder how to use what you call a public method without seeing a quick example? Perhaps I am just a bit thick :)

I'd be happy to work on the other fix when I get some time after this week.

Cheers,
Jason

[bvaughn]

FYI I'm going to pull this into the upcoming version 9 release (PR #577).

Long-term I think the solution here is to combine Collection and CollectionView. They are separate because I initially intended to refactor Grid and other components to share logic with Collection but it never panned out. Now they're just over-engineered. For the short-term, I'll add a pass-thru for forceUpdate.

[bvaughn]

Fixed with 00c4def