-
Notifications
You must be signed in to change notification settings - Fork 24.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FlatList] FlatList unmounts its header component continuously #13602
Comments
I think this is due to the fact that FlatList treats the ListHeaderComponent like a normal Item, but my header has its state because has a search box and some filters pickers. I need those components to be inside of the scrollView of the FlatList, otherwise their position will be fixed on top, while scrolling the list. |
+1 |
+1 |
1 similar comment
+1 |
I've got an example where this is much worse than originally stated in this issue. Without scrolling, the flatlist header can continuously unmount if there is data loading for other parts of the flatlist (so prop changes for other sections). |
+1 |
@sahrens since you worked on |
This is a little nuanced... tl;dr: always pre-bind functions you pass as props so you don't re-create the function on every render. So I would recommend turning that function into an autobound method like so:
then when you set the prop, it will always be the same thing and react will update the instance rather than re-creating from scratch:
If the auto-binding initializer syntax doesn't work for you for some reason, you can bind it in the constructor instead. I also recommend auto-binding for all your other props as well, like Couple other notes:
|
Thank you for the quick response. Just wondering, how would you bind it in the constructor instead? |
|
Thank you so much @sahrens |
thanks @sahrens |
thanks @sahrens Something worth mentioning though is you say it's of type I'm worried that other people will use this class and won't realise their header is un-mounting constantly. ...and shouldn't it be |
@xavier-villelegier unfortunately in my case the ListHeaderComponent doesn't update. I have an component that show the calendar with next and previous day button for ListHeaderComponent, I've followed the workaround but after the state on SearchScreen changed, the ListHeaderComponent won't re-render.
|
Description
I have a FlatList with ListHeaderComponent, that is composed with some pickers, when you scroll down or up the header component is being mounted and unmounted continuously, causing the header status to be reset, so pickers will lose their current value.
Reproduction Steps and Sample Code
My implementation:
JobListHeader render only
It seems that onEndReached triggers unmount and mount.
Additional Information
The text was updated successfully, but these errors were encountered: