Function map

Reactivily apply a map function to each element in an array, persisting map-results for each object, based on identity.

This is useful when you have a large collection of items that need to be transformed into a different shape (adding/removing/modifying data/properties) and you want the transform to be efficient when iterating over that data.

A common use case where this map resource provides benefits over is

class MyClass {\
  @cached
  get wrappedRecords() {
    return this.records.map(record => new SomeWrapper(record));
  }
}
Copy

Even though the above is @cached, if any tracked data accessed during the evaluation of wrappedRecords changes, the entire array.map will re-run, often doing duplicate work for every unchanged item in the array.

Example

 import { map } from 'reactiveweb/map';

 class MyClass {
   wrappedRecords = map(this, {
     data: () => this.records,
     map: (record) => new SomeWrapper(record),
   }),
 }
Copy