CODEWITHSUNDEEP
javascriptreact-nativeuse-effect
Abdo Rabah
Abdo Rabah

Reputation: 2062

Call and API inside useEffect in react native?

I'm calling an Api to get data but the data is really heavy. I'm wondering if i'm calling it in right place inside useEffect or should i call it somewhere else. I've put the console.log to check but the number of console.log exceeded the number of objects i have in the API. My code is :

const ProductsList = () => {
  const [products, setProducts] = useState([]);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    let isMounted = true;
    getProducts().then((response) => {
      if (isMounted) {
        console.log('im being called');
        setProducts(response);
        setLoading(false);
      }
    });
    return () => { isMounted = false; };
  }, [products]);

  return (
    <View style={styles.container}>
      {isLoading ? <ActivityIndicator /> : ((products !== [])
          && (
          <FlatList
            data={products}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => {
              return (
                <Item
                  style={{ marginLeft: 35 }}
                  name={item.name}
                  date={item.date}
                  address={item.adress}
                />
              );
            }}
          />
          )
      )}
    </View>
  );
};

Upvotes: 4

Views: 152

Answers (1)

Flagship1442
Flagship1442

Reputation: 1726

It looks like your effect goes round in a circle:

  1. On each render the effect will look at products to see if it has changed.

  2. If it has changed it will call your effect which fetches new products.

  3. When you get new products you update your products state.

  4. This causes the effect to run again.

You probably only want to run that effect once, when the component mounts. In which case you can simply write:

  useEffect(() => {
    getProducts().then((response) => {
      setProducts(response);
      setLoading(false);
    });
  }, []); // <-- note the empty array, which means it only runs once when mounted

If that single API call is too heavy, then you need to look more at things like pagination in your requests, or modifying the response to return only the data you really need. But that's outside the scope of this question, I think.

Let me know if you have any questions.

Upvotes: 3

Related Questions