title: React Native My expo app keeps requesting data from the api even after it had loaded the data
body: <p>My expo app keeps requesting data from the API even after it had loaded the data
  even after i had left the Current screen it keep fetching. ...........................................................................................................................................................................................................................</p>
  <pre><code>
  import styles from '../HomeScreen/style';
  import React, { useEffect, useState } from &quot;react&quot;;
  
  import {
  Dimensions,
    FlatList,
    SafeAreaView,
    ScrollView,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View,
    Image,
    Animated,
    Button,
  } from 'react-native';
  
  import Icon from 'react-native-vector-icons/MaterialIcons';
  import COLORS from '../HomeScreen/colors';
  import hotels from '../HomeScreen/hotels';
  //import hotels from '../HomeScreen/hotels';
  const {width} = Dimensions.get('screen');
  const cardWidth = width / 1.8;
  
  
  const CityScreen = ({navigation}) =&gt; {
  
  
    const categories = ['All', 'Popular', 'Top Rated','low Budget'];
    const [selectedCategoryIndex, setSelectedCategoryIndex] = React.useState(0);
    const [activeCardIndex, setActiveCardIndex] = React.useState(0);
    const scrollX = React.useRef(new Animated.Value(0)).current;
  
   
  
    const [dataa,setData] = useState(&quot;&quot;);
    const [isLoading,setLoading] = useState(true);
  
    useEffect(()=&gt;{
      fetch('https://egytourism.000webhostapp.com/fetch_city.php')   
      .then((response) =&gt; response.json())  
        .then((json) =&gt; {     setData(json)   })
        .then(setLoading(false))
        .then(console.log(&quot;0&quot;))   
         .catch((error) =&gt; {      console.error(error);    })
    
  
    ,[]})
   
    
    const Card = ({hotel, index}) =&gt; {
      const id = hotel.id;
      const inputRange = [
        (index - 1) * cardWidth,
        index * cardWidth,
        (index + 1) * cardWidth,
      ];
      const opacity = scrollX.interpolate({
        inputRange,
        outputRange: [0.7, 0, 0.7],
      });
      const scale = scrollX.interpolate({
        inputRange,
        outputRange: [0.8, 1, 0.8],
      });
      return (
        &lt;TouchableOpacity
          disabled={activeCardIndex != index}
          activeOpacity={1}
          onPress={() =&gt; navigation.navigate('ChoiceScreen', id)}&gt;
         
  
          &lt;Animated.View style={{...styles.card, transform: [{scale}]}}&gt;
            &lt;Animated.View style={{...styles.cardOverLay, opacity}} /&gt;
  
            &lt;Image  source={{uri:hotel.image }}  style={styles.cardImage} /&gt;
            &lt;View style={styles.cardDetails}&gt;
              &lt;View
                style={{flexDirection: 'row', justifyContent: 'space-between'}}&gt;
                &lt;View&gt;
                  &lt;Text style={{fontWeight: 'bold', fontSize: 17}}&gt;
                    {hotel.name}
                  &lt;/Text&gt;
                  &lt;Text style={{color: COLORS.grey, fontSize: 12}}&gt;
                    {hotel.location}
                  &lt;/Text&gt;
                &lt;/View&gt;
                &lt;Icon name=&quot;bookmark-border&quot; size={26} color={COLORS.primary} /&gt;
              &lt;/View&gt;
              &lt;View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  marginTop: 10,
                }}&gt;
                &lt;View style={{flexDirection: 'row'}}&gt;
                  &lt;Icon name=&quot;star&quot; size={15} color={COLORS.orange} /&gt;
                  &lt;Icon name=&quot;star&quot; size={15} color={COLORS.orange} /&gt;
                  &lt;Icon name=&quot;star&quot; size={15} color={COLORS.orange} /&gt;
                  &lt;Icon name=&quot;star&quot; size={15} color={COLORS.orange} /&gt;
                  &lt;Icon name=&quot;star&quot; size={15} color={COLORS.grey} /&gt;
                &lt;/View&gt;
                &lt;Text style={{fontSize: 10, color: COLORS.grey}}&gt;365reviews&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/Animated.View&gt;
        &lt;/TouchableOpacity&gt;
      );
    };
  
  
    return (
      &lt;SafeAreaView style={{flex: 1, backgroundColor: COLORS.white}}&gt;
        &lt;View style={styles.header}&gt;
  
  
        
          &lt;View style={{paddingBottom: 15}}&gt;
                  &lt;View style={styles.headers}&gt;
            &lt;Icon
              name=&quot;arrow-back-ios&quot;
              size={28}
              color={COLORS.dark}
              onPress={navigation.goBack}
            /&gt;
            &lt;Icon name=&quot;bookmark-border&quot; size={28} color={COLORS.white} /&gt;
          &lt;/View&gt;
            &lt;Text style={{fontSize: 30, fontWeight: 'bold'}}&gt;
              Find your hotel
            &lt;/Text&gt;
            &lt;View style={{flexDirection: 'row'}}&gt;
              &lt;Text style={{fontSize: 30, fontWeight: 'bold'}}&gt;in &lt;/Text&gt;
              &lt;Text
                style={{fontSize: 30, fontWeight: 'bold', color: COLORS.primary}}&gt;
                Cities
              &lt;/Text&gt;
            &lt;/View&gt;
          &lt;/View&gt;
          &lt;Icon name=&quot;person-outline&quot; size={38} color={COLORS.grey} /&gt;
        &lt;/View&gt;
        &lt;ScrollView showsVerticalScrollIndicator={false}&gt;
  
          &lt;View&gt;
            &lt;Animated.FlatList
              onMomentumScrollEnd={(e) =&gt; {
                setActiveCardIndex(
                  Math.round(e.nativeEvent.contentOffset.x / cardWidth),
                );
              }}
              onScroll={Animated.event(
                [{nativeEvent: {contentOffset: {x: scrollX}}}],
                {useNativeDriver: true},
              )}
              horizontal
              data={dataa}
              contentContainerStyle={{
                paddingVertical: 30,
                paddingLeft: 20,
                paddingRight: cardWidth / 2 - 40,
              }}
              showsHorizontalScrollIndicator={false}
              renderItem={({item, index}) =&gt; &lt;Card hotel={item} index={index} /&gt;}
              snapToInterval={cardWidth}
            /&gt;
          &lt;/View&gt;
         
        &lt;/ScrollView&gt;
      &lt;/SafeAreaView&gt;
    );
  };
  export default CityScreen;
  
  </code></pre>
  <p>if you look at the network area it appears that it's requesting more than one time
  [1]: <a href="https://i.stack.imgur.com/DYByf.png" rel="nofollow noreferrer">https://i.stack.imgur.com/DYByf.png</a></p>