From @jedwards1211 on Sun, 10 Nov 2019 05:08:53 GMT

If you approve of this I'd be willing to work on a PR!

Since it's extremely handy to use a React/Redux-style top down approach with lots of collection.map(item => <SomeElement item={item} />) operations during rendering, but this architecture is really not scalable, it would be nice to make .map, .filter and other methods a bit more scalable.

For context: I'm coding up a node-red style visual programming interface and thinking about the fact as the list of nodes and wires grows, UI speed when dragging a single node around will degrade below 30fps as the number of nodes/wires gets longer and longer...

Basically some kind of API could cache the previous result for any given subtree and avoid redoing any work on subtrees that haven't changed.

This would bring the cost of each rerender down to (I assume) O(log(n)) if just a single entry in the collection has changed.

How the API could potentially look

const memoized = MemoizedCollection(c => c.filter(isEven).map(double))
const prevInput = Map([...])
const prevOutput = memoized(prevInput)

const nextInput = prev.set('foo', 3)
const nextOutput = memoized(nextInput)

It would be awesome with a custom React hook

export function useMemoizedCollection(input, ops, dependencies = []) {
  const memoized = React.useMemo(() => MemoizedCollection(ops), dependencies)
  return memoized(input)
}

export const List = ({items}) => {
  const itemElements = useMemoizedCollection(
    items,
    c => c.filter(someFilter).map((value, key) => <li key={key}>{value}</li>),
    []
  )
  return (
    <ul>
      {[...items.values()]}
    </ul>
  )
}

Copied from original issue: immutable-js#1750