React won't re-render after fetching array from server and storing in MobX state tree

[Justinfan827]

Bug report

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

Sandbox link or minimal reproduction code

Parent.tsx

// rootStore is provided using the Provider component that wraps my root component. 

@inject("rootStore") 
@observer
export class PendingOrdersScreen extends React.Component<any, any> {

  constructor(props) {
    super(props); 
    this.state = {
      orders: []
    }
  }

  render() {
    return (
      <View style={css.screen.paddedScreen}>
        <ScrollView>
          <OrderList orders={this.props.rootStore.orders.pending}/>
        </ScrollView>
      </View>
      )
  }
}

OrderList.tsx

    render() {
        return (
            <View style={css.orderList.flatList}>
                <FlatList
                style={css.orderList.flatList}
                data= {this.props.orders}
                keyExtractor={(item, index) => item.id.toString()}
                renderItem={({item}) => 
                    <OrderListItem order={item}></OrderListItem>
                }
              />
            </View>
            )
    }

OrderListItem.tsx

        return (
                <View style={css.orderListItem.row}>
                    <View style={css.orderListItem.row_cell}>
                        <Text style={css.orderListItem.row_location}> {this.props.order.customer} </Text>
                        <Text style={css.orderListItem.row_location}> {this.props.order.id} </Text>
                        <Text style={css.orderListItem.row_location}> {this.props.order.name} </Text>
                    </View>      
                </View>
        )

Describe the expected behavior

Parent.tsx is my screen, which renders a OrderList. When the screen first loads, I make an API call to fetch a list of Orders, which I then store in my MobX store. I would expect that the Parents screen re-renders and in turn render the OrderList since rootStore.orders.pending now has a length greater than 0.

Describe the observed behavior

Even after the API call is successful and the list of orders is stored in the MobX store, the OrderList component doesn't show up on the screen.

I've decorated the Parent Component, OrderList, and OrderListItem with @observer. Been stuck for hours trying to figure this out, please help.

[Justinfan827]

Possibly related to #1060? But I tried adding

{JSON.stringify(this.props.order)}

to my OrderListItem's render method, still not working.

[xaviergonz]

Is flatlist observer too?
If not you will need to change data to be getSnapshot(this.props.orders)

[xaviergonz]

I think the issue is that Flatlist only rerenders items when the reference to the data object changes. If it were observer it wouldn't be needed, but if it's out of your control you need to transform the data into a plain object (via getSnapshot) so it is a whole new object every time any of the orders change.

@mweststrate would it make sense so getSnapshot is changed to only make the minimum mutations needed if a previous snapshot is fed into it? (so it keeps unchanged sub object references still). Or even better, so it's done automatically... Or that's already the case?

[mweststrate]

@xaviergonz yes, snapshots already use structural sharing, so unchanged items are already recycled :)

[xaviergonz]

@mweststrate that's actually an awesome feature that I don't think is mentioned anywhere in the docs :)

[xaviergonz]

Nevermind, it is mentioned, just I never read it for some reason 😶

[stale]

This issue has been automatically marked as stale because it has not had recent activity in the last 10 days. It will be closed in 4 days if no further activity occurs. Thank you for your contributions.

[Yassir4]

For anyone else still facing issues with updating the flatlist , try this
data={data.slice()}

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.