react-native flatlist does not re-render on element update?
So I read that react native FlatList is a PureComponent, so it does not re-render automatically. But, my current FlatList re-renders when an element is removed or added (so when the array length changes), but if I try to change an element in the data array without changing the length, the FlatList does not re-render. Is there any way to do this?
I have tried extraData here, with a flag in my redux state that changes when the action is dispatched, but it does not work.
reactjs react-native redux react-native-flatlist
asked Nov 12 '18 at 19:47
Michael HsuMichael Hsu
365212
add a comment |
So I read that react native FlatList is a PureComponent, so it does not re-render automatically. But, my current FlatList re-renders when an element is removed or added (so when the array length changes), but if I try to change an element in the data array without changing the length, the FlatList does not re-render. Is there any way to do this?
I have tried extraData here, with a flag in my redux state that changes when the action is dispatched, but it does not work.
reactjs react-native redux react-native-flatlist
asked Nov 12 '18 at 19:47
Michael HsuMichael Hsu
365212
1
"shouldComponentUpdatedoes a shallow comparison". Write your own checker and returntruewhen items change
– Wainage
Nov 12 '18 at 20:49
exactly what I just figured out, thanks!!!
– Michael Hsu
Nov 12 '18 at 20:51
add a comment |
So I read that react native FlatList is a PureComponent, so it does not re-render automatically. But, my current FlatList re-renders when an element is removed or added (so when the array length changes), but if I try to change an element in the data array without changing the length, the FlatList does not re-render. Is there any way to do this?
I have tried extraData here, with a flag in my redux state that changes when the action is dispatched, but it does not work.
reactjs react-native redux react-native-flatlist
asked Nov 12 '18 at 19:47
Michael HsuMichael Hsu
365212
So I read that react native FlatList is a PureComponent, so it does not re-render automatically. But, my current FlatList re-renders when an element is removed or added (so when the array length changes), but if I try to change an element in the data array without changing the length, the FlatList does not re-render. Is there any way to do this?
I have tried extraData here, with a flag in my redux state that changes when the action is dispatched, but it does not work.
reactjs react-native redux react-native-flatlist
reactjs react-native redux react-native-flatlist
asked Nov 12 '18 at 19:47
Michael HsuMichael Hsu
365212
asked Nov 12 '18 at 19:47
Michael HsuMichael Hsu
365212
asked Nov 12 '18 at 19:47
Michael HsuMichael Hsu
365212
asked Nov 12 '18 at 19:47
Michael HsuMichael Hsu
365212
asked Nov 12 '18 at 19:47
Michael HsuMichael Hsu
365212
365212
1
"shouldComponentUpdatedoes a shallow comparison". Write your own checker and returntruewhen items change
– Wainage
Nov 12 '18 at 20:49
exactly what I just figured out, thanks!!!
– Michael Hsu
Nov 12 '18 at 20:51
add a comment |
1
"shouldComponentUpdatedoes a shallow comparison". Write your own checker and returntruewhen items change
– Wainage
Nov 12 '18 at 20:49
exactly what I just figured out, thanks!!!
– Michael Hsu
Nov 12 '18 at 20:51
1
1
"
shouldComponentUpdate does a shallow comparison". Write your own checker and return true when items change– Wainage
Nov 12 '18 at 20:49
"
shouldComponentUpdate does a shallow comparison". Write your own checker and return true when items change– Wainage
Nov 12 '18 at 20:49
exactly what I just figured out, thanks!!!
– Michael Hsu
Nov 12 '18 at 20:51
exactly what I just figured out, thanks!!!
– Michael Hsu
Nov 12 '18 at 20:51
add a comment |
1 Answer
1
active
oldest
votes
Fixed it. My FlatList rendered Child1Components, which had a Child2Component (nested in another level), and that component, for some reason, was not updating - only the Child1Component was updated. So I every time I wanted to update something in the nested Child2Component, I ran
this.setState(prevState => ({ flag: !prevState.flag });
in Child2Component to re-render it.
answered Nov 12 '18 at 20:50
Michael HsuMichael Hsu
365212
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53269107%2freact-native-flatlist-does-not-re-render-on-element-update%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Fixed it. My FlatList rendered Child1Components, which had a Child2Component (nested in another level), and that component, for some reason, was not updating - only the Child1Component was updated. So I every time I wanted to update something in the nested Child2Component, I ran
this.setState(prevState => ({ flag: !prevState.flag });
in Child2Component to re-render it.
answered Nov 12 '18 at 20:50
Michael HsuMichael Hsu
365212
add a comment |
Fixed it. My FlatList rendered Child1Components, which had a Child2Component (nested in another level), and that component, for some reason, was not updating - only the Child1Component was updated. So I every time I wanted to update something in the nested Child2Component, I ran
this.setState(prevState => ({ flag: !prevState.flag });
in Child2Component to re-render it.
answered Nov 12 '18 at 20:50
Michael HsuMichael Hsu
365212
add a comment |
Fixed it. My FlatList rendered Child1Components, which had a Child2Component (nested in another level), and that component, for some reason, was not updating - only the Child1Component was updated. So I every time I wanted to update something in the nested Child2Component, I ran
this.setState(prevState => ({ flag: !prevState.flag });
in Child2Component to re-render it.
answered Nov 12 '18 at 20:50
Michael HsuMichael Hsu
365212
Fixed it. My FlatList rendered Child1Components, which had a Child2Component (nested in another level), and that component, for some reason, was not updating - only the Child1Component was updated. So I every time I wanted to update something in the nested Child2Component, I ran
this.setState(prevState => ({ flag: !prevState.flag });
in Child2Component to re-render it.
answered Nov 12 '18 at 20:50
Michael HsuMichael Hsu
365212
answered Nov 12 '18 at 20:50
Michael HsuMichael Hsu
365212
answered Nov 12 '18 at 20:50
Michael HsuMichael Hsu
365212
answered Nov 12 '18 at 20:50
Michael HsuMichael Hsu
365212
365212
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53269107%2freact-native-flatlist-does-not-re-render-on-element-update%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
"
shouldComponentUpdatedoes a shallow comparison". Write your own checker and returntruewhen items change– Wainage
Nov 12 '18 at 20:49
exactly what I just figured out, thanks!!!
– Michael Hsu
Nov 12 '18 at 20:51