fetch data from api loading slow react native

Question

I am fetching data(content and image) from an api, and render it to a flatlist, whenever I load the app it is always slow and take a while before it display the rendered data, how can I fix it, I will appreciate if you work on my code, to provide the answer and also if you will recommend a dependency make sure it work with expo see my below code.

    URL = 'https://placewave.com/avatar';

    const [Data, setData] = React.useState([]);

    useEffect(() => {
        axios.get('https://placewave.com/alluser')
        .then((response) => setData(response.data))
        .catch(error => { console.log(error) });
    }, []);


<FlatList 
   data = {Data}
   keyExtractor={item => item.id}
   showsVerticalScrollIndicator = {false}  
   renderItem={({item}) => {
    return (


    <Image 
     source={{ uri: URL + '/' + item.user_image}}
     resizeMode="cover"
     style={styles.userImage}
    />
   <Text>{item.user_name}</Text>

   )
}}
/>

Thank you.

If response has huge data then It will take time to render on screen and other thing is, If images are too heavy then It will also take time to render — Nooruddin Lakhani
– Nooruddin Lakhani, Commented Feb 14, 2022 at 12:28

Christian · Accepted Answer · 2022-02-14 12:57:12Z

1

Like mentioned by Nooruddin there a few reasons. As your app does not show anything until the list of all users and at least the first image is loaded this seems to be the reason.

A few improvements:

show a loading indicator until at least the user list is loaded (ActivityIndicator)
if the API supports this, try to load the users in blocks (like 20 per fetch) and implement a load more with the onScroll-Event of FlatList
if the API supports this, load thumbnails of the user images in overview mode and only full resolution if needed.

answered Feb 14, 2022 at 12:57

Christian

4,6611 gold badge28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

fetch data from api loading slow react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related