use React.memo instead of useMemo

autoHeightWebView/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import React, { useState, useEffect, useMemo, useRef, useImperativeHandle, forwardRef } from 'react';
+import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
 
 import { StyleSheet, Platform, ViewPropTypes } from 'react-native';
 
@@ -8,80 +8,80 @@ import PropTypes from 'prop-types';
 
 import { WebView } from 'react-native-webview';
 
-import { getMemoResult, getWidth, isSizeChanged } from './utils';
-
-const AutoHeightWebView = forwardRef((props, ref) => {
-  let webView = useRef();
-  useImperativeHandle(ref, () => ({
-    stopLoading: () => webView.current.stopLoading(),
-    goForward: () => webView.current.goForward(),
-    goBack: () => webView.current.goBack(),
-    reload: () => webView.current.reload(),
-    injectJavaScript: script => webView.current.injectJavaScript(script)
-  }));
-
-  const { style, onMessage, onSizeUpdated, source, baseUrl, files, customStyle, customScript, zoomable } = props;
-
-  const [size, setSize] = useState(() => ({
-    height: style && style.height ? style.height : 0,
-    width: getWidth(style)
-  }));
-  const hanldeMessage = event => {
-    onMessage && onMessage(event);
-    if (!event.nativeEvent) {
-      return;
-    }
-    let data = {};
-    // Sometimes the message is invalid JSON, so we ignore that case
-    try {
-      data = JSON.parse(event.nativeEvent.data);
-    } catch (error) {
-      console.error(error);
-      return;
-    }
-    const { height, width } = data;
-    const { height: previousHeight, width: previousWidth } = size;
-    isSizeChanged({ height, previousHeight, width, previousWidth }) &&
-      setSize({
-        height,
-        width
-      });
-  };
-
-  const { currentSource, script } = useMemo(
-    () => getMemoResult({ source, baseUrl, files, customStyle, customScript, zoomable }),
-    [source, baseUrl, files, customStyle, customScript, zoomable]
-  );
-
-  const { width, height } = size;
-  useEffect(
-    () =>
-      onSizeUpdated &&
-      onSizeUpdated({
-        height,
-        width
-      }),
-    [width, height, onSizeUpdated]
-  );
-
-  return (
-    <WebView
-      {...props}
-      ref={webView}
-      onMessage={hanldeMessage}
-      style={[
-        styles.webView,
-        {
-          width,
-          height
-        },
-        style
-      ]}
-      injectedJavaScript={script}
-      source={currentSource}
-    />
-  );
-});
+import { reduceData, getWidth, isSizeChanged, shouldUpdate } from './utils';
+
+const AutoHeightWebView = React.memo(
+  forwardRef((props, ref) => {
+    let webView = useRef();
+    useImperativeHandle(ref, () => ({
+      stopLoading: () => webView.current.stopLoading(),
+      goForward: () => webView.current.goForward(),
+      goBack: () => webView.current.goBack(),
+      reload: () => webView.current.reload(),
+      injectJavaScript: script => webView.current.injectJavaScript(script)
+    }));
+
+    const { style, onMessage, onSizeUpdated, source, baseUrl, files, customStyle, customScript, zoomable } = props;
+
+    const [size, setSize] = useState(() => ({
+      height: style && style.height ? style.height : 0,
+      width: getWidth(style)
+    }));
+    const hanldeMessage = event => {
+      onMessage && onMessage(event);
+      if (!event.nativeEvent) {
+        return;
+      }
+      let data = {};
+      // Sometimes the message is invalid JSON, so we ignore that case
+      try {
+        data = JSON.parse(event.nativeEvent.data);
+      } catch (error) {
+        console.error(error);
+        return;
+      }
+      const { height, width } = data;
+      const { height: previousHeight, width: previousWidth } = size;
+      isSizeChanged({ height, previousHeight, width, previousWidth }) &&
+        setSize({
+          height,
+          width
+        });
+    };
+
+    const { currentSource, script } = reduceData({ source, baseUrl, files, customStyle, customScript, zoomable });
+
+    const { width, height } = size;
+    useEffect(
+      () =>
+        onSizeUpdated &&
+        onSizeUpdated({
+          height,
+          width
+        }),
+      [width, height, onSizeUpdated]
+    );
+
+    return (
+      <WebView
+        {...props}
+        ref={webView}
+        onMessage={hanldeMessage}
+        style={[
+          styles.webView,
+          {
+            width,
+            height
+          },
+          style
+        ]}
+        injectedJavaScript={script}
+        source={currentSource}
+      />
+    );
+  }),
+  (prevProps, nextProps) => !shouldUpdate({ prevProps, nextProps })
+);
 
 AutoHeightWebView.propTypes = {
   onSizeUpdated: PropTypes.func,

autoHeightWebView/utils.js

@@ -116,7 +116,7 @@ export const isSizeChanged = ({ height, previousHeight, width, previousWidth })
   return height !== previousHeight || width !== previousWidth;
 };
 
-export const getMemoResult = props => {
+export const reduceData = props => {
   const { source, baseUrl } = props;
   const script = getScript(props);
   let currentSource = baseUrl ? { baseUrl } : {};
@@ -131,3 +131,21 @@ export const getMemoResult = props => {
     };
   }
 };
+
+export const shouldUpdate = ({ prevProps, nextProps }) => {
+  if (!(prevProps && nextProps)) {
+    return true;
+  }
+  for (const prop in nextProps) {
+    if (nextProps[prop] !== prevProps[prop]) {
+      if (typeof nextProps[prop] === 'object' && typeof prevProps[prop] === 'object') {
+        if (shouldUpdate({ prevProps: prevProps[prop], nextProps: nextProps[prop] })) {
+          return true;
+        }
+      } else {
+        return true;
+      }
+    }
+  }
+  return false;
+};