Mobx @computed called repeatedly even when returned value is the same object instance

Question

I am using React Virtualized <Autosizer> component and I have verified that removing this causes the unexpected behaviour to go away.

https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md

My @computed simply looks like this:

foo=[];

@computed get filteredCollection() {
    return this.foo;
}

Why am I seeing this behaviour? Under what circumstances would this value not be cached by mobx and simply returned without invoking the function?

Causes unexpected behaviour:

<AutoSizer>
    {this.renderTable}
</AutoSizer>

Does not cause unexpected behaviour:

{this.renderTable({ width: 200, height: 200 })}

(filteredCollection is used by renderTable)

score 1 · Answer 1 · answered Aug 31 '18 at 14:10

This appears to be due to the automatic suspension of unused computeds. When the table re-renders, the component is removed, and the computed is momentarily unused. When it becomes used again, it must be set up again, which involves invoking the function.

The fix is to make sure the computed is used elsewhere during this time, or use the keepAlive option.

Mobx @computed called repeatedly even when returned value is the same object instance

1 Answers1