A way to get rendered indexes.
See original GitHub issueProblem:
I am changing some values of rendered items in List component. But the list isn’t showing my change. I am making a workaround using forceUpdateGrid
. But I should detect in my props if any of my items was changed.
Other solution.
Detect if any value of items in current RENDERED RANGE changed, and re-render them.
Workaround
I am using a List component and I saved as virtualList
ref.
componentWillReceiveProps(nextProps) {
const startIndex = this.virtualList.Grid._rowStartIndex;
const stopIndex = this.virtualList.Grid._rowStopIndex;
this.shouldForceList = compareItems(startIndex, stopIndex, this.pros, nextProps); // comparte item list.
}
componentDidUpdate() {
if (this.shouldForceList && this.virtualList) {
this.virtualList.forceUpdateGrid();
}
}
Issue Analytics
- State:
- Created 7 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Getting Your Pages Crawled, Rendered, And Indexed - Botify
We're going to explore why focusing on crawling, rendering, and indexing is a crucial first step in any enterprise's SEO methodology. How are ......
Read more >How to retrieve of index of for-loop rendered React Components
But I realized I have no idea how to pass i from index to onClick. How can I do this? Am I approaching...
Read more >Rendering from Vertex and Index Buffers (Direct3D 9)
An index buffer 'indexes' into the vertex buffer so each unique vertex needs to be stored only once in the vertex buffer. The...
Read more >How (& Why) Search Engines Render Pages
So, the short answer as to when rendering takes place is: “after indexing” and the timeline is variable but short, essentially meaning that...
Read more >JavaScript rendering and indexing: Cautionary tales and how ...
While it isn't a good idea to rely on only one test like this, their experience matches up with my own. I have...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
The reason for this is explained briefly here.
forceUpdateGrid
is an acceptable solution for this. A unique property that changes when your items changes (such as an incremented counter) would also work.If item changes invalidate their size then you should always inform
List
(by callingrecomputeRowHeights
, which will also re-render for you). If it only affects their visuals, not size, then callingforceUpdateGrid
is sufficient.You can do this with the
onRowsRendered
property mentioned in the docs. It will trigger each time the visual range of rows change.So try something like this:
I am going to close this issue because I believe you have all of the tools you need to do what you’re looking for. 😄
Yup. RV doesn’t know anything about the second case.