React Native Flatlist ListItem called many times after initial render

Question

Flatlist component as below

 item.ID.toString()}
 renderItem={this.renderItem}
 onRefresh={this.         


        

Answer 1

Try the following:

add to state a boolean value (you can name it "wasFetched").

Then change the componentDidMount like this:

componentDidMount() {
     if(this.state.wasFetched === false) {
          this.setState({ wasFetched: true }, () => this.makeRemoteRequest())
     }
}

Answer 2

An Update

Please Find the entire code of Flatlist component

import React, { PureComponent } from "react";
import { View, FlatList } from "react-native";
import { ListItem } from "react-native-elements";
import FL from "../screens/FL";
import FL1 from "../screens/Fl1";

class FlatListDemo extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      error: null,
      refreshing: false,
    };
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const url = `https://jsonplaceholder.typicode.com/posts`;
    this.setState({ loading: true });

    fetch(url)
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          data: res,
          error: res.error || null,
          loading: false,
          refreshing: false,
        });
      })
      .catch((error) => {
        this.setState({ error, loading: false });
      });
  };

  renderItem = ({ item }) => {
    return <ListElement onPress={() => this.rowData(item)} item={item} />;
  };

  render() {
    if (this.state.loading === true) {
      return <View></View>;
    } else {
      return (
        <View>
          <FlatList
            data={this.state.data}
            keyExtractor={(item) => item.ID.toString()}
            renderItem={this.renderItem}
            onRefresh={this.onRefresh}
            refreshing={this.state.refreshing}
            ListFooterComponent={this.renderFooter}
          />
        </View>
      );
    }
  }
}

export default FlatListDemo;