CODEWITHSUNDEEP
reactjsreact-native
EmilM
EmilM

Reputation: 137

React Native. VirtualizedList: PureComponent, shouldComponentUpdate, etc

I get a big array from API, and I want to show images from this array. I made it, but it does not work correct.

React native show me only 8 images and send me next information (VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.)

How could I display all images but with recommendation of React Native?

Anyone can help me with it? Thanks in advance!

My code:

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, View, Image, SafeAreaView, StyleSheet } from 'react-native';

export default SignInScreen = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  });

  return (
    <SafeAreaView>
      {isLoading ? <ActivityIndicator/> : (
        <View style={styles.container}>
          <FlatList
            data={data}
            keyExtractor={({ id }, index) => id.toString()}
            renderItem={({ item }) => <Image style={styles.imageView} source={{ uri: item.thumbnailUrl }} />}
          />
        </View>
      )}
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingVertical: 60,
    paddingHorizontal: 20,
  },
  imageView: {
    width: 150,
    height: 150 ,
    margin: 7,
    borderRadius : 7
  }
})

Upvotes: 1

Views: 737

Answers (1)

Nayan Sharma
Nayan Sharma

Reputation: 33

Use PureComponent to create a component in FlatList so FlatList will not rerender when there is no changes in the array of images.

Upvotes: 1

Related Questions