0

I've been learning MobX from the docs and wanted to replicate a normalized redux store in MobX.

I have a map of the authors authorsMap with the author's id as key and an array of authors' id, authorsArray, which is used to preserve order the authors are received from the server.

A computed property iterates over authorsArray and returns a new array with author objects.

Every time I add a new author to authorsArray and auhorsMap, my list component updates along with all the list items.

I've tried to figure it out from docs and I don't understand why it's happening, maybe I've missed something or maybe my expectations are wrong.

Here's the link to the sandbox https://codesandbox.io/s/gallant-clarke-u8ust?file=/src/App.js

hackhan
  • 512
  • 3
  • 7
  • Not quite understand what is your question? Why `AuthorList` updates? Because you iterate over all of the authors `authors.map(...` and `authors` is a computed property that gets updated after you add new author. – Danila Jun 21 '20 at 15:31
  • What you can and should do is mark `Author` component as `observer`. That way React won't re-render existing authors because they will be automatically `memo`d – Danila Jun 21 '20 at 15:33
  • Yes, `authors` is a computed array but the elements of `authors` are observable objects. Whenever a new author is added `authors` should be recomputed and `AuthorList` should be updated but the list items that are displaying individual author's information should not since they're observers and are observing on the observable objects present in `authors`, and `Author` is wrapped in `Observer` already. – hackhan Jun 21 '20 at 16:36
  • `Author` is not wrapper in `observer` right now in your example. If you do that then it will work as expected. – Danila Jun 21 '20 at 16:40
  • `` don't have automatic memoization – Danila Jun 21 '20 at 16:42
  • If you don't use `memo` (or any alternative like `sCU` or whatever) then when Parent component re-renders all its children will re-render too. – Danila Jun 21 '20 at 16:47
  • Hmm, I guess `` doesn't work the way I thought it would. – hackhan Jun 21 '20 at 17:57

0 Answers0