I got a product list page. Which is mainly consist of flatList items. and this product list will change according to the props passed to the component.

When user comes into the page first time. The list is showing fine. let take It as LISTA

But when user comes into the page second time. The flat list item will show old items images for a moment which is images from listA before changes into the new one which is LISTB

What I don't understand is that I do put a loading screen when api is calling the list and change into setLoading false in finally block. So why the images are not changed into the new one before loading screen comes off?

Eg Code

useEffect(() => {
  setLoading(true)
  axios.get('pList')
 .then((res) => {setProductList(res.data) })
 .catch((e) =>. {})
 .finally(() => setLoading(false))
},[])

CodePudding user response：

It will be re-render image from everytime. You need to cache image in default application or device memory. Best way is the FastImage for lazyloading.

import FastImage from 'react-native-fast-image'
    
<FastImage
        style={styles.image}
        source={{
          uri: YOUR_IMAGE_URL,
          priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
      />

CodePudding user response：

pass navigation as props and detect change in navigation state. and set list to empty while unfocused

export default function ProductScreen({navigation}: any) {

useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      setLoading(true)
      axios.get('pList')
     .then((res) => {setProductList(res.data) })
     .catch((e) =>. {})
     .finally(() => setLoading(false))
    });

    return () => {
        unsubscribe,
        setProductList([])
    }
 }, [navigation]);

}