Incremental Loading with React
• Mark Eschbach
I’ve got 99 problems, and incremental loaindg in React is 1. I actually have a lot more problems but I’m only willing ot speak about 99 of them though.
Anyway, I have a Web Application which manages images. I have originally written the application in Polymer using WebComponets…but that isn’t where I need my current body of knowledge to be. One feature the previous application has the React rewrite doesn’t have is incremental loading. Not that the algorithm was great, it would just load large buckets. But at least it loaded buckets. Without that it would saturate user’s bandwidth downloading several thousand images.
For the React WUI I was hoping to use the fancy incremental loading which things like Facebook use. Or at least that is where I was going to start. First up to bat is react-visibility-sensor by joshwnj. Truthyfully because it was the first result to pop up on Google :-).
I’ve been thinking about this problem for a while now. Originally I desired creating what conceptually would have been simple to me: declare a sensor which would deal with requesting more elements when a user got to the end of the stream. After some time searching I couldn’t find any paritcular element which manages complex state able to do this. I’m not really surprised; but nothing ventured, nothing gained.
Currently the data structure backing the view breaks up images by year-month buckets. I display them broken out to each. With this sensor I hope to load a set number of images each time it becomes visible. Six images sounds good because at some point browsers could only have 6 concurrent conncetions to remote resources. Alrighty, implementation plan set. Go!