CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-hooks
林子翔
林子翔

Reputation: 23

How to prevent multiple rerender in react native UseEffect

I have three components which are feed, profile, profileImage. The feed will pass a profileObject to the profile and profile will extract the imageObject out from the profileImage and pass it to the profileImage. So the relationship among these three components are like below:

Feed -> Profile -> ProfileImage, where feed is the parent of Profile, and Profile is the parent of ProfileImage.

In the ProfileImage component, we have a loadFailed state which will be set to true if the image failed to load and if it is true then we will display a default avatar image.

  <Image
    source={
      loadFailed
        ? defaultAvatar
        : {
            uri: imageObject.source,
          }
    }
    defaultSource={loadingIcon}
    onError={() => {
      setLoadFailed(true);
    }}
  />

Here is the difficult part, everytimes when the user refresh the page, the data is going to refetch everytime also, so the feed will again pass the object all the way down to profileImage component. As the object reference is different everytime, the useEffect in the profileImage component will always trigger and reset the loadFailed state to false again, which is the expected default behaviour, however, I dont want the render to load more than 1 time, the component is rendered at least 2 times in this case.

  useEffect(() => {
    if (loadFailed) {
      setLoadFailedfalse);
    }
  }, [imageObject]);

Can someone helps? Sorry if my explanation is not clear

Upvotes: 0

Views: 66

Answers (1)

Akshay PandherPatte
Akshay PandherPatte

Reputation: 173

you also have to check if imageObject is available then setLoading as a false

useEffect(() => {
    if (loadFailed || imageObject) {
      setLoadFailedfalse);
    }
  }, [imageObject]);

Upvotes: 1

Related Questions