React-window: Howto: Prevent image flickering

[ivan-badmaev]

Hi good people,
my question is not entirely related to react-window, but there's some behaviour I don't understand, I'm asking for your guidance here.

Question: why images are getting rerendered every time they go out of viewport, even if I'm using memoization for src and itemData prop for the VariableSizeList?

Demo:
https://codesandbox.io/embed/reverent-margulis-zndls

Thanks in advance!

[bvaughn]

When row scroll out of view, they are unmounted (so any local memoization is lost). In your specific demo, it looks like you're just loading random images- so if you scroll back and a row gets remounted, it will load a new URL. To avoid this you would need to store that state above the list and pass it down via a prop.

Here's an overview of how windowing works that you might find helpful:
https://addyosmani.com/blog/react-window/

[ivan-badmaev]

Thanks for the answer, @bvaughn

What value should be stored in state, could you elaborate on that?
I moved url string to data array, added Row memoization, got no effect (updated the demo). Could you please give me some hints on how it should be done?

I've read the other issue #234 about reusing already rendered in the past DOM structure, and I have a suspition that it's the only way to go forward. Is it true?

[bvaughn]

In your example, I don't think it's really possible, because the website you're using intentionally returns _random_ images :)

In general though, it's good to be aware that when using a library like react-window, items will be unmounted (so their local state will be lost) once they're scrolled out of a viewport. If you need that state to stick around, you'd want to move it up to a parent component.

Here's a React doc that explains the process of "lifting state" up to a parent component:
https://reactjs.org/docs/lifting-state-up.html#lifting-state-up