Calculated field does not update immediately when value updates

I tested a model with an array of items, a calculated field for the item-count, and a thunk that fetches items. The flow is like this:

• The initial value of items contains 3 items
• Therefore the initial value of the calculated count = 3
• A getItems() thunk fetches 200 additional items, then…
• An appendItems() action appends these to items

When the items are appended, the <List> component re-renders, as expected. However the count still reports only 3 items.

The <List> immediately re-renders again; with the correct count this time. Here is the output of console.log({ count, items }) for each render…

List.js { count: 3, items: Array(3) }
List.js { count: 3, items: Array(203) }
List.js { count: 203, items: Array(203) }

This is not a serious problem since it re-renders correctly a few ms later. However the calculated value is incorrect in the first re-render, and there should only be a single re-render.

[allpro]

I am not seeing the same behaviour at all, even in different component trees.

See this sandbox example where I “fetch” 2000 items even.

ACTUALLY your sandbox shows the same resulte. You just aren’t noticing the 2nd re-render. I added some console.log output to your sample…

• https://codesandbox.io/embed/easy-peasy-starter-ldkg3

This is what the console shows for each of the 3 renders. Note that in the 2nd render the ‘count’ is out of sync with the number of items.

Object {items: Array[0], count: 0}
Object {items: Array[2000], count: 0}
Object {items: Array[2000], count: 2000}

[allpro]

Nice side effect of this is that we no longer need to declare dependencies on the useStoreState hook.

That’s cool. Simpler and simpler.