Visibility status and unload

[designbyadrian]

Hello! I'm trying to replace a combo with react-visibility-sensor and react-image with react-lazy-images because of your SSR and srcset support, but one feature I'm missing is an onChange prop, so I can get events for when the component is considered in or out of view.

react-intersection-observer has an InView component. It would be nice to leverage that in some way.

Edit: or maybe I just use the InView component myself? Would that double up the event listeners?

Related, what's your opinion on unloading images when out of view?

[Pushplaybang]

This is more a question than anything else, but wouldn't unloading images just be additional unnecessary work? Unless you are using a virtualised list for a huge amount of content, what would the benefit be?

[fpapado]

Hi @designbyadrian , and sorry for the late response!
I haven't found much use for unloading images when out of view. Or, more precisely, when I've had a need to virtualise a list, it was more coarsely in terms of the component tree, rather than the images themselves.
For that reason, the LazyImage components only listen for a change once (triggerOnce) in terms of InView.

For virtualisation, I like react-window.

Now, in terms of InView, you could definitely use it directly. Also, if the version ranges are compatible, you could npm i react-intersection-observer and use their export directly. Again, I don't think it would bring much benefit, but still an option :) IntersectionObserver is quite efficient with resources, so it should be fine (though if in doubt, it's something to profile!).

[designbyadrian]

@fpapado Thank you for your reply!