Preventing re-rendering when accessing view with argument

[NgoKnows]

So essentially I have something similar to this

const BookStore = types
  .model('BookStore', {
    books: types.array(
      types.model({ name: types.string, author: types.string })
    ),
  })
  .views((self) => ({
    get booksGroupedByAuthor() {
      return _.groupBy(self.books, ({ author }) => author);
    },

    booksForAuthor(authorId) {
      return self.booksGroupedByAuthor[authorId];
    },
  }));

My component is accessing BookStore.booksForAuthor(authorId), but it is re-rendering when I add books to the books array that have an author that isn't the corresponding authorId. How do I get my component to only care about a specific authorId.

[jamonholmgren]

I've replicated this @NgoKnows:

https://codesandbox.io/s/stupefied-brook-6h9df?file=/src/App.tsx

My initial thought is that it might make sense to use a types.map for this; essentially, you'd make something like this:

const AuthorBooks = types.model({
  id: types.identifier
  books: types.array(types.reference(Book))
})

// in BookStore
booksByAuthor: types.map(AuthorBooks)

Then populate that property when you update your books.

This is a little more manual than I'd like -- I wish your code worked out of the box -- but I don't think there's an easy way to do that. If anyone wants to take a stab at it, check out the sandbox and then share your findings here.

[NgoKnows]

Ah yes, yeah that's a bit manual and feels like it goes a bit against the whole derive anything you can nature of MST.

I do remember a long time ago, I feel like I may have used createTransformer for this case (https://doc.ebichu.cc/mobx/refguide/create-transformer.html), but it looks like it has been removed.