prevent unneeded rerenders

apps/mobile/src/views/Editor/EditorWrapper.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { KeyboardAvoidingView, Platform, SafeAreaView, View } from 'react-native';
 import { PanGestureHandler, State } from 'react-native-gesture-handler';
 import Animated, { Easing } from 'react-native-reanimated';

apps/mobile/src/views/Editor/index.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import { Platform, TextInput, View } from 'react-native';
+import React, {useEffect} from 'react';
+import {Platform, TextInput, View} from 'react-native';
 import WebView from 'react-native-webview';
-import { notesnook } from '../../../e2e/test.ids';
-import { useTracked } from '../../provider';
+import {notesnook} from '../../../e2e/test.ids';
+import {useTracked} from '../../provider';
 import PremiumService from '../../services/PremiumService';
 import EditorHeader from './EditorHeader';
 import {
@@ -12,73 +12,75 @@ import {
   sourceUri,
   textInput,
   _onMessage,
-  _onShouldStartLoadWithRequest
+  _onShouldStartLoadWithRequest,
 } from './Functions';
-const Editor = () => {
-  const [state] = useTracked();
-  const {colors} = state;
+const Editor = React.memo(
+  () => {
+    const [state] = useTracked();
+    const {colors} = state;
 
-  
-
-  return (
-    <>
-      <TextInput
-        ref={textInput}
-        style={{height: 1, padding: 0, width: 1, position: 'absolute'}}
-        blurOnSubmit={false}
-      />
-      <EditorHeader />
-      <WebView
-        testID={notesnook.ids.default.editor}
-        ref={EditorWebView}
-        onError={(error) => console.log(error)}
-        onLoad={async (event) =>
-          await onWebViewLoad(PremiumService.get(), colors, event)
-        }
-        javaScriptEnabled={true}
-        focusable={true}
-        keyboardDisplayRequiresUserAction={false}
-        injectedJavaScript={Platform.OS === 'ios' ? injectedJS : null}
-        onShouldStartLoadWithRequest={_onShouldStartLoadWithRequest}
-        renderLoading={() => (
-          <View
-            style={{
-              width: '100%',
-              height: '100%',
-              backgroundColor: 'transparent',
-            }}
-          />
-        )}
-        cacheMode="LOAD_DEFAULT"
-        cacheEnabled={false}
-        domStorageEnabled={true}
-        scrollEnabled={false}
-        bounces={false}
-        allowFileAccess={true}
-        scalesPageToFit={true}
-        allowingReadAccessToURL={Platform.OS === 'android' ? true : null}
-        allowFileAccessFromFileURLs={true}
-        allowUniversalAccessFromFileURLs={true}
-        originWhitelist={['*']}
-        source={
-          Platform.OS === 'ios'
-            ? {uri: sourceUri}
-            : {
-                uri: 'file:///android_asset/texteditor.html',
-                baseUrl: 'file:///android_asset/',
-              }
-        }
-        style={{
-          height: '100%',
-          maxHeight: '100%',
-          width: '100%',
-          alignSelf: 'center',
-          backgroundColor: 'transparent',
-        }}
-        onMessage={_onMessage}
-      />
-    </>
-  );
-};
+    return (
+      <>
+        <TextInput
+          ref={textInput}
+          style={{height: 1, padding: 0, width: 1, position: 'absolute'}}
+          blurOnSubmit={false}
+        />
+        <EditorHeader />
+        <WebView
+          testID={notesnook.ids.default.editor}
+          ref={EditorWebView}
+          onLoad={async (event) =>{
+            console.log("on load webview event")
+            await onWebViewLoad(PremiumService.get(), colors, event)
+          }
+          }
+          javaScriptEnabled={true}
+          focusable={true}
+          keyboardDisplayRequiresUserAction={false}
+          injectedJavaScript={Platform.OS === 'ios' ? injectedJS : null}
+          onShouldStartLoadWithRequest={_onShouldStartLoadWithRequest}
+          renderLoading={() => (
+            <View
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'transparent',
+              }}
+            />
+          )}
+          cacheMode="LOAD_DEFAULT"
+          cacheEnabled={false}
+          domStorageEnabled={true}
+          scrollEnabled={false}
+          bounces={false}
+          allowFileAccess={true}
+          scalesPageToFit={true}
+          allowingReadAccessToURL={Platform.OS === 'android' ? true : null}
+          allowFileAccessFromFileURLs={true}
+          allowUniversalAccessFromFileURLs={true}
+          originWhitelist={['*']}
+          source={
+            Platform.OS === 'ios'
+              ? {uri: sourceUri}
+              : {
+                  uri: 'file:///android_asset/texteditor.html',
+                  baseUrl: 'file:///android_asset/',
+                }
+          }
+          style={{
+            height: '100%',
+            maxHeight: '100%',
+            width: '100%',
+            alignSelf: 'center',
+            backgroundColor: 'transparent',
+          }}
+          onMessage={_onMessage}
+        />
+      </>
+    );
+  },
+  () => true,
+);
 
 export default Editor;