How to prevent flatlist header or footer from re-render in reactnative

Arrow-Funktions are "always" executed and create a new Reference in Memory. This way they will always re-rendering if component will be executed.

For performance reasons you better define your function outside and call it like this:

function renderMyItem(){  ...bimbom... yous stuff goes here! }
function renderHeader(){  ...bimbom... yous stuff goes here! }

<Flatlist
  renderItem={this.renderMyItem()}
  ListHeaderComponent={this.renderHeader()}
  ...
/>

What happens here? Both of your functions renderMyItem and renderHeader will be executed once if your component is loaded and will be saved in memory. So every time you call one of the functions, you call a reference to the place in memory where they are saved.

In the other case, Arrow-Functions ()=>{...} are executed in current context and generate a new reference in Memory, each time they called, because .. to say it clear: you define & call a function that way.

If you are using Functional Component then don't use Arrow function () => (...) for header and footer components of FlatList but instead only return your header and footer Components as shown in the sample below.

<FlatList
    ...
    ListHeaderComponent={(<View><Text>Header</Text></View>)}
    ListFooterComponent={(<View><Text>Footer<Text></View>)}
/>