CODEWITHSUNDEEP
reactjsreact-virtualized
Fate Riddle
Fate Riddle

Reputation: 374

Weird interaction 'react-virtualize'd working with 'react-sortable-hoc'

https://codesandbox.io/s/qYEvQEl0

So I wrote a demo myself that didn't work compare to one sample that works, the only difference being one props for <List/>

rowHeight={({ index }) => 50}

rowHeight={50}

I use the latter way ofc. And it is not working. Why?

Upvotes: 0

Views: 360

Answers (1)

bvaughn
bvaughn

Reputation: 13497

Answer copied from the duplicate GitHub issue you filed ;)

This creates a new function prop each time you render:

rowHeight={({ index }) => 50}

The prop-change is sufficient to trigger a re-render of the child component even if no other properties changed. In the second example above, no props change at all and so List doesn't know it needs to re-render. (Check out the section on "pure components" in the docs for more info.)

In this case, you could pass a small attribute that changes each time sort order changes (eg an incremented counter) to let the component know to re-render. You could also call forceUpdate.

Upvotes: 1

Related Questions