0

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?

Fate Riddle
  • 364
  • 1
  • 3
  • 15

1 Answers1

1

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.

bvaughn
  • 13,300
  • 45
  • 46
  • While in the real project I use redux to manage states, the same rowHeight={({ index }) => 50} doesn't trigger re-render somehow. I'd like to know why? (Using props to pass redux state into List fixing it, but I;m still curious) – Fate Riddle Jun 28 '17 at 06:51
  • I don't know your project setup, sorry. Can't say. – bvaughn Jun 28 '17 at 14:17