mutations on array do not lead to rerender

[qinhuaihe]

Bug report

• I've checked documentation and searched for existing issues
• I've made sure my project is based on the latest MST version
• Fork this code sandbox or another minimal reproduction.

Sandbox link or minimal reproduction code

reproduction

please look at src/page/Test where the store and the page located. I want to provide a codesandbox. But there are too many modules to create one. I'm sorry.

Describe the expected behavior

When I change the array, the page should rerender.

Describe the observed behavior

When I push some item into an array, the array changed, but there is no rerender. When I change the text in the same model, the rerender happend. What's wrong with these code?

[qinhuaihe]

This is the page, data array works on the div and the Table with some difference.

page code

import { Button, Card, Table } from 'antd';
import { inject, observer } from 'mobx-react';
import * as React from 'react';
import { ITestStore } from './stores/test';

export interface ITestProps {
  testStore: ITestStore,
}

@inject(({ stores }) => ({
  testStore: stores.test,
}))
@observer
export default class Test extends React.Component<ITestProps> {
  public render() {
    const { testStore } = this.props;
    const { text, data } = testStore;
    return (
      <Card>
        <Button onClick={testStore.randomText}>randomeText: {text}</Button>
        <Button onClick={testStore.addItem}>addItem</Button>
        {/* when I add an div here, everything works ok */}
        {/* <div>{JSON.stringify(data)}</div> */}
        <Table
          size="small"
          columns={[{ title: 'Name', dataIndex: 'name' }]}
          dataSource={data}
          pagination={false}
        />
      </Card>
    );
  }
}

[xaviergonz]

That is more about mobx/mobx-react than mobx-state-tree

Basically what happens is this

Premises:

• Table is a PureComponent, which means that if none of the props change between re-renders it won't re-render itself

• observer for Test will make sure the component is only re-rendered when any of the TOUCHED values inside render change (basically a mobx-autorun on render that forces an update if any observable value TOUCHED (accessed) when render was last run is changed)

(json.stringify commented out)

• Test only touches data (the reference to the array, which never changes) and Table doesn't touch the data inside the array again since it is a PureComponent
• result, no re-render

(json.stringify not commented)

• the json.stringify function internally touches (accesses) all array and inner array objects in order to generate a json representation of it
• therefore any time the array or anything inside it changes the Test component (and therefore its Table child) will re-render

Your best bet is either:
a) changing the Table component so it uses @observer rather than PureComponent, so it touches the actual data inside the array upon rendering (more performant)
b) if that's not possible then to change the Test render method so it touches all the data inside the array (e.g. traversing all its items and inner items, you don't need to actually render them). A quick but inefficient way to do this is moving the JSON.stringify to the top of the render method. Either way this solution will be less efficient than A.

There are of course more solutions, but those two are the simplest ones that come to my mind

[qinhuaihe]

Thanks for your reply, you are so kind.
But I checked the code of Table, it is a Component instead of a PureComponent. I'm confused.

[xaviergonz]

Sorry I was looking at StandardTable

still Table seems to have lots of custom logic to achieve something similar

[xaviergonz]

Another way is to do
<Table dataSource={getSnapshot(data)} .../>,
and it will work since it will generate a whole new reference (JSON object) every time it is rendered (everytime the array or any of its inner items change), but again this will also be inefficient

[qinhuaihe]

I created an minimal reproduction codesandbox for testing these cases.
Then I found the behaviors are so weird.
It seems that I have to use 'getSnapshot' everytime when using the array from mobx-state-tree.

[xaviergonz]

If you add @observer to ListComponent the first sample will also work (and be more performant)

[xaviergonz]

Maybe you can try

const OTable = observer(Table)

and then use OTable instead of Table and that will work without having to make snapshots, but that very much depends on the implementation of Table itself

[mkramb]

I had similar problem, I think the last suggestion is the best - yes, it's not pretty. You could also always pass a new array to Table component as data.slice() and then rely on rows keys for React reconciler to update only new rows.

In my case I changed the ”Table” component API to something like https://material-ui.com/demos/tables/, where you need to loop through all rows in your render function (which means it will be tracked by mobx).

[qinhuaihe]

Ok, I understand this is a feature instead of a bug now.

[qinhuaihe]

mobxjs/mobx#101

[xaviergonz]

Glad you got it solved :)

[schumannd]

@zmayor can you explain what you mean by "it is a feature now"?

I have run into this problem. Now as a hacky hack to trigger rerenders, we add stuff like.

this.myArray = this.myArray.filter(_obj => true);

To all our mutating functions. This can't be intended right?

Also, the link to your reproduction is dead now. Can you post it again? I would be very interested in it

[mweststrate]

@schumannd that is definitely not how it is supposed to be done. But please don't comment on issues that are closed for over a year, but rather file a new bug report.