render same dataRow too much every time - react-native

Question

Items re-render multiple times Whenever new Items are added to data prop array. So how can I avoid this useless re-rendering of items.
I am using
react-native 0.59.0
react 16.8.3
This is what I get when I log, Items in it's render method
renderItem 0
renderItem 1
renderItem 2
renderItem 3
// from here render again
renderItem 0
renderItem 1
renderItem 2
renderItem 3
renderItem 4
renderItem 5
renderItem 6
renderItem 7
//gettingData and displaying component
let offset = this.props.fetchedData.length;
//function to fetch data from server
getData() {
fetch(url, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
limit: 20,
offset,
}),
})
.then(response => (response.json())
.then((responseJson) => {
if (responseJson.status) {
this.props.fetchedDataChange(responseJson.data);
}
})
.catch((error) => {
alert(error);
}));
}
//renderItem function for flatlist
renderItem({ item }) {
return (
<View>
<Text>
{item.name}
</Text>
</View>
);
}
render() {
return (
<View>
<FlatList
data={this.props.fetchedData}
renderItem={{ item } => this.renderItem({ item })}
keyExtractor={(item, index) => index.toString()}
extraData={this.props}
initialNumToRender={20}
maxToRenderPerBatch={20}
onEndReached={() => this.getData()}
onEndReachedThreshold={0.5}
/>
</View>
);
}
const mapStateToDispatchProps = dispatch => ({
fetchedDataChange: value => dispatch(fetchedDataChange(value)
});
const mapStateToProps = state => ({
fetchedData: state.fetchedDataReducer.fetchedData
});
export default connect(mapStateToProps, mapDispatchToProps)(gettingData);
//fetchedData reducer component
const INITIAL_STATE = {
fetchedData: [],
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case FETCHED_DATA_CHANGED:
return {
...state,
fetchedData: [...state.fetchedData, ...action.payload]
};
default:
return state;
}
};

Answer 1

If your data prop is getting updated from state variable everytime state changes re-rendering will occur.

Answer 2

I believe you might be looking for React.PureComponent which implements a shallow comparison to decide if rerender is needed. You can also achieve this by implementing shouldComponentUpdate() on React.Component.
There is already an example in FlatList's docs that demonstrate how you can use PureComponent to render your list, just scroll down abit and look for the "more complex example" :)
If you prefer to use a Functional Component instead of a Class Component, checkout React.memo, which is similar to React.PureComponent but for Functional Components. Hope it helps.