Crank: Virtualized-list components a possible great application?

[cpryland]

Seems like the libraries like react-virtualized could be implemented fairly easily by Crank's async generator components, instead of the hairy machinery involved in those libraries.

Maybe I'm wrong (without implementation (and a deeper understanding of react-virtualized) this is just speculation), but my instinct is that if you had a list of 10K entries, that you could have a Crank component that returned essentially just an empty non-zero-height div, and an intersection observer on the parent list that would ask any sub-component element in view or about to come into view to instantiate its actual contents.

Am I off base here?

[brainkim]

No I think you’re definitely onto something! One cool thing is that we can actually reuse arrays of elements, because they’re preserved between renders:

function *VirtualList() {
  let els = Array.from({length: 1000}, (i) => <VirtualEl crank-key={i} />);
  // some listener which mutates elements
  while (true) {
    yield <div>{els}</div>;
  }
}

This might decrease the memory requirements of huge stateful arrays. You could do this in React, but putting actual elements in React state always felt icky, and elements themselves were supposed to be immutable. We don’t have that requirement in Crank, and mutating elements in rare cases where memory needs to be reused could be kinda cool. Maybe it’s a huge mistake but I think there’s a lot of room for experimentation.

[lishine]

FYI this is the new kid in the block and the alternative for react-window:
React hooks implementation
https://github.com/tannerlinsley/react-virtual