Fix `Image.getSize` in `useEffect` cleanup

src/components/Timelines/Timeline/Shared/Attachment/Image.tsx

@@ -20,30 +20,41 @@ const AttachmentImage: React.FC<Props> = ({
 }) => {
   layoutAnimation()
 
+  let isMounted = false
+  useEffect(() => {
+    isMounted = true
+
+    return () => {
+      isMounted = false
+    }
+  })
   const [imageVisible, setImageVisible] = useState<string>()
   const [imageLoadingFailed, setImageLoadingFailed] = useState(false)
-  useEffect(
+  useEffect(() => {
-    () =>
+    const preFetch = () =>
+      isMounted &&
       Image.getSize(
         image.preview_url,
-        () => setImageVisible(image.preview_url),
+        () => isMounted && setImageVisible(image.preview_url),
         () => {
-          Image.getSize(
+          isMounted &&
-            image.url,
+            Image.getSize(
-            () => setImageVisible(image.url),
+              image.url,
-            () =>
+              () => isMounted && setImageVisible(image.url),
-              image.remote_url
+              () =>
-                ? Image.getSize(
+                image.remote_url
-                    image.remote_url,
+                  ? isMounted &&
-                    () => setImageVisible(image.remote_url),
+                    Image.getSize(
-                    () => setImageLoadingFailed(true)
+                      image.remote_url,
-                  )
+                      () => isMounted && setImageVisible(image.remote_url),
-                : setImageLoadingFailed(true)
+                      () => isMounted && setImageLoadingFailed(true)
-          )
+                    )
+                  : isMounted && setImageLoadingFailed(true)
+            )
         }
-      ),
+      )
-    []
+    preFetch()
-  )
+  }, [isMounted])
 
   const children = useCallback(() => {
     if (imageVisible && !sensitiveShown) {

src/components/Timelines/Timeline/Shared/Card.tsx

@@ -13,11 +13,22 @@ export interface Props {
 const TimelineCard: React.FC<Props> = ({ card }) => {
   const { theme } = useTheme()
 
+  let isMounted = false
+  useEffect(() => {
+    isMounted = true
+
+    return () => {
+      isMounted = false
+    }
+  })
   const [imageLoaded, setImageLoaded] = useState(false)
-  useEffect(
+  useEffect(() => {
-    () => card.image && Image.getSize(card.image, () => setImageLoaded(true)),
+    const preFetch = () =>
-    []
+      card.image &&
-  )
+      isMounted &&
+      Image.getSize(card.image, () => isMounted && setImageLoaded(true))
+    preFetch()
+  }, [isMounted])
   const cardVisual = useMemo(() => {
     if (imageLoaded) {
       return <Image source={{ uri: card.image }} style={styles.image} />

src/screens/Shared/Account/Header.tsx

@@ -17,23 +17,33 @@ const AccountHeader: React.FC<Props> = ({
 }) => {
   const [ratio, setRatio] = useState(accountState.headerRatio)
 
+  let isMounted = false
+  useEffect(() => {
+    isMounted = true
+
+    return () => {
+      isMounted = false
+    }
+  })
   useEffect(() => {
     if (
       account?.header &&
       !account.header.includes('/headers/original/missing.png')
     ) {
-      Image.getSize(account.header, (width, height) => {
+      isMounted &&
-        if (!limitHeight) {
+        Image.getSize(account.header, (width, height) => {
-          accountDispatch &&
+          if (!limitHeight) {
-            accountDispatch({
+            accountDispatch &&
-              type: 'headerRatio',
+              accountDispatch({
-              payload: height / width
+                type: 'headerRatio',
-            })
+                payload: height / width
-        }
+              })
-        setRatio(limitHeight ? accountState.headerRatio : height / width)
+          }
-      })
+          isMounted &&
+            setRatio(limitHeight ? accountState.headerRatio : height / width)
+        })
     }
-  }, [account])
+  }, [account, isMounted])
 
   const windowWidth = Dimensions.get('window').width