Search code examples
javascriptfirebasereact-nativeexporeact-native-flatlist

Avoid rerender of ListHeaderComponent for each item in list

In my React Native Function component I use Expo FlatList to display many images from the Google firebase storage.

My Component Screen

In doing so, I noticed that the ListHeaderComponent is rendered for each individual event.

Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
and so on...

Since I also query data from the Local Sotrage in the ListHeaderComponent, this leads to a heavy load.

Does anyone have an idea how I can avoid the rerendering the ListHeaderComponent?

Solution

  • I don't know if this is a good or the right solution, but it works for me an feels like a workaround.

    In the ListHeaderComponent create a useEffect and bind this to one State using the Array.

    useEffect(() => { getCurrentEvent() }, [isActive]);