Mobx: FlatList of react-native not re-render when the data changed

[Symous]

Hi, I am using React-Native(0.45) FlatList component with mobx 3.2.2 , I have found that the flatlist will not update(re-render) when the data changed. here is the sample code:

@observer
export default class TaskPage extends Component {
@observable
    pageState = {
        taskList: [{id:1,value:'1'},{id:2,value:'2'},{...}],
    };

....
 render(){
   <FlatList data={this.pageState.taskList} 
   ....
   />
}
}

when I call code

this.pageState.taskList[0].value = '0'

it will not re-render as expected, I also use data={this.pageState.taskList.slice()},still not working.
so wired. any idea about that ? thanks a lot!

[mweststrate]

The update property seems not relevant for the flat list (it is used
nowhere) so that seems to behave as expected

On vr 10 nov. 2017 04:06 Symous [e-mail] wrote:

Hi, I am using React-Native(0.45) FlatList component with mobx 3.2.2 , I
have found that the flatlist will not update(re-render) when the data
changed. here is the sample code:

@observerexport default class TaskPage extends Component {
@observable
pageState = {
taskList: [{id:1,value:'1'},{id:2,value:'2'},{...}],
update : false,
};
....
render(){
....
/>
}
}

when I call code

this.pageState.taskList[0].value = '0'

it will not re-render as expected, but if I call

this.pageState.update = !this.pageState.update

behind that the FlatList will re-render,
so wired. any idea about that ? thanks a lot!

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/1235, or mute the thread
https://github.com/notifications/unsubscribe-auth/ABvGhIVWqXJ6j3ao0gSUnL5PsEYFxrVYks5s072pgaJpZM4QZAdY
.

[Symous]

@mweststrate hi,thanks for your reply. I have updated the issue description.
the problem is that I set and when the taskList value changed, the flatlist will not re-render. :D

[urugator]

<FlatList data={Mobx.toJS(this.pageState.taskList)} 
   ....
   />

[mweststrate]

Closed for inactivity after answer has been provided

[SourceCipher]

<FlatList data={Mobx.toJS(this.pageState.taskList)} 
   ....
   />

Its so weird.. toJS is actually making an observable object to a non-observable.. But it seems like converting my observable object to toJS made my FlatList to re-render again... React black magic..

[mweststrate]

See https://mobx.js.org/best/react.html section: "MobX only tracks data accessed for observer components if they are directly accessed by render"

Two things to keep in mind

1. Don't pass observables to components that are not observer, they can't _react_ to them
2. If the component you are passing observables to uses HoC / render callback to render it's content, taht callback needs to use observer / Observer to be able to respond to the changes.

[SourceCipher]

@mweststrate But that doesnt explain to me why its working when passing with toJS? Is it because the toJS is inside the render and any changes to the object which gets converted with toJS is triggering the render again?

[mweststrate]

Yes

Op ma 17 dec. 2018 om 09:33 schreef Gvidas M. [e-mail]:

@mweststrate https://github.com/mweststrate But that doesnt explain to
me why its working when passing with toJS? Is it because the toJS is inside
the render and any changes to the object which gets converted with toJS is
triggering the render again?

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx/issues/1235#issuecomment-447762182, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhNgMZ_kHHE99Li7sIUAfKUv9Ujhsks5u51bqgaJpZM4QZAdY
.

[quantumpotato]

My component is an observer, I still get this error
https://stackoverflow.com/questions/55522718/flatlist-mobx-reactnative-missing-option-for-computed-get

[lock[bot]]

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.