perf: Use React.memo for FastImage. (#449)

DylanVann · Apr 21, 2019 · 5c2b4af · 5c2b4af
1 parent 89c0e2e
commit 5c2b4af
Showing 1 changed file with 47 additions and 45 deletions.
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, memo } from 'react'
 import PropTypes from 'prop-types'
 import {
     View,
@@ -11,59 +11,61 @@ import {
 
 const FastImageViewNativeModule = NativeModules.FastImageView
 
-const FastImage = forwardRef(
-    (
-        {
-            source,
-            onLoadStart,
-            onProgress,
-            onLoad,
-            onError,
-            onLoadEnd,
-            style,
-            children,
-            fallback,
-            ...props
-        },
-        ref,
-    ) => {
-        const resolvedSource = Image.resolveAssetSource(source)
-
-        if (fallback) {
-            return (
-                <View style={[styles.imageContainer, style]} ref={ref}>
-                    <Image
-                        {...props}
-                        style={StyleSheet.absoluteFill}
-                        source={resolvedSource}
-                        onLoadStart={onLoadStart}
-                        onProgress={onProgress}
-                        onLoad={onLoad}
-                        onError={onError}
-                        onLoadEnd={onLoadEnd}
-                    />
-                    {children}
-                </View>
-            )
-        }
+function FastImageBase({
+    source,
+    onLoadStart,
+    onProgress,
+    onLoad,
+    onError,
+    onLoadEnd,
+    style,
+    children,
+    fallback,
+    forwardedRef,
+    ...props
+}) {
+    const resolvedSource = Image.resolveAssetSource(source)
 
+    if (fallback) {
         return (
-            <View style={[styles.imageContainer, style]} ref={ref}>
-                <FastImageView
+            <View style={[styles.imageContainer, style]} ref={forwardedRef}>
+                <Image
                     {...props}
                     style={StyleSheet.absoluteFill}
                     source={resolvedSource}
-                    onFastImageLoadStart={onLoadStart}
-                    onFastImageProgress={onProgress}
-                    onFastImageLoad={onLoad}
-                    onFastImageError={onError}
-                    onFastImageLoadEnd={onLoadEnd}
+                    onLoadStart={onLoadStart}
+                    onProgress={onProgress}
+                    onLoad={onLoad}
+                    onError={onError}
+                    onLoadEnd={onLoadEnd}
                 />
                 {children}
             </View>
         )
-    },
-)
+    }
+
+    return (
+        <View style={[styles.imageContainer, style]} ref={forwardedRef}>
+            <FastImageView
+                {...props}
+                style={StyleSheet.absoluteFill}
+                source={resolvedSource}
+                onFastImageLoadStart={onLoadStart}
+                onFastImageProgress={onProgress}
+                onFastImageLoad={onLoad}
+                onFastImageError={onError}
+                onFastImageLoadEnd={onLoadEnd}
+            />
+            {children}
+        </View>
+    )
+}
+
+const FastImageMemo = memo(FastImageBase)
+
+const FastImage = forwardRef((props, ref) => (
+    <FastImageMemo forwardedRef={ref} {...props} />
+))
 
 FastImage.displayName = 'FastImage'