Don't understand how reactive works

[sergeymild]

Hello i have a code

constComponent: React.FC = observer(() => {
    cont store = useContext(MobxStore)
    return (<FlatList data={store.items} renderItem={({item, index}) => <Text>{index}</Text>}/>)
})

class MobxStore {
  constructor() {
    makeAutoObservable(this)
  }

  @observable
  items: Array<number> = []

  removeItem = (index: number) => {
    runInAction(() => this.items.splice(index, 1))
  }
}

If i will call store.removeItem(1), In that case the FlatList will not be updated.

But if make a something like that:

constComponent: React.FC = observer(() => {
    cont store = useContext(MobxStore)
    const items = store.items
    return (<FlatList data={items} renderItem={({item, index}) => <Text>{index}</Text>}/>)
})

// or if in removeItem method i will make
this.items = this.items.filter((a, i) => i !== index)

FlatList will be updated.
What i did wrong? Thanks.

[mweststrate]

https://mobx.js.org/react-integration.html#callback-components-might-require-observer

…

On Fri, Mar 26, 2021 at 12:20 PM SergeyMild ***@***.***> wrote: Hello i have a code constComponent: React.FC = observer(() => { cont store = useContext(MobxStore) return (<FlatList data={store.items} renderItem={({item, index}) => <Text>{index}</Text>}/>) }) class MobxStore { constructor() { makeAutoObservable(this) } @observable items: Array<number> = [] removeItem = (index: number) => { runInAction(() => this.items.splice(index, 1)) } } In that case the FlatList will not be updated, but if make a something like that constComponent: React.FC = observer(() => { cont store = useContext(MobxStore) const items = store.items return (<FlatList data={items} renderItem={({item, index}) => <Text>{index}</Text>}/>) }) FlatList will be updated. What i did wrong? Thanks. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2866>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBCNYTIDSA47BVDTUU3TFR3YTANCNFSM4Z3JLYYA> .

[sergeymild]

yes but here i don't need observer for each item, in that case i only need observe arrays of items and delete it from list after i have called removeItem. But flatList still render all items even if i have called removeItem

[sergeymild]

My problem is that whole FlatList don't rerenders after i call removeItem

[mweststrate]

I don't know what FlatList is, so can't tell when it will render or not. For your other question, please study the linked page first, the answer is quite literally in there.

[mweststrate]

Sorry, section above it. On Fri, Mar 26, 2021 at 12:24 PM Michel Weststrate ***@***.***> wrote:

…

https://mobx.js.org/react-integration.html#callback-components-might-require-observer On Fri, Mar 26, 2021 at 12:20 PM SergeyMild ***@***.***> wrote: > Hello i have a code > > constComponent: React.FC = observer(() => { > cont store = useContext(MobxStore) > return (<FlatList data={store.items} renderItem={({item, index}) => <Text>{index}</Text>}/>) > }) > > class MobxStore { > constructor() { > makeAutoObservable(this) > } > > @observable > items: Array<number> = [] > > removeItem = (index: number) => { > runInAction(() => this.items.splice(index, 1)) > } > } > > In that case the FlatList will not be updated, but if make a something > like that > > constComponent: React.FC = observer(() => { > cont store = useContext(MobxStore) > const items = store.items > return (<FlatList data={items} renderItem={({item, index}) => <Text>{index}</Text>}/>) > }) > > FlatList will be updated. > What i did wrong? Thanks. > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > <#2866>, or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAN4NBCNYTIDSA47BVDTUU3TFR3YTANCNFSM4Z3JLYYA> > . >

[urugator]

mobxjs/mobx-react#484 (comment)