pass named function to react.memo so in dev tools it doesn't show as anonymous (#2216)

This makes debugging easier as well

src/excalidraw-embed/index.tsx

@@ -9,63 +9,62 @@ import "../css/styles.scss";
 import { ExcalidrawProps } from "../types";
 import { IsMobileProvider } from "../is-mobile";
 
-const Excalidraw = React.memo(
-  (props: ExcalidrawProps) => {
-    const {
-      width,
-      height,
-      onChange,
-      initialData,
-      user,
-      onUsernameChange,
-    } = props;
+const Excalidraw = (props: ExcalidrawProps) => {
+  const {
+    width,
+    height,
+    onChange,
+    initialData,
+    user,
+    onUsernameChange,
+  } = props;
 
-    useEffect(() => {
-      // Block pinch-zooming on iOS outside of the content area
-      const handleTouchMove = (event: TouchEvent) => {
-        // @ts-ignore
-        if (typeof event.scale === "number" && event.scale !== 1) {
-          event.preventDefault();
-        }
-      };
+  useEffect(() => {
+    // Block pinch-zooming on iOS outside of the content area
+    const handleTouchMove = (event: TouchEvent) => {
+      // @ts-ignore
+      if (typeof event.scale === "number" && event.scale !== 1) {
+        event.preventDefault();
+      }
+    };
 
-      document.addEventListener("touchmove", handleTouchMove, {
-        passive: false,
-      });
+    document.addEventListener("touchmove", handleTouchMove, {
+      passive: false,
+    });
 
-      return () => {
-        document.removeEventListener("touchmove", handleTouchMove);
-      };
-    }, []);
+    return () => {
+      document.removeEventListener("touchmove", handleTouchMove);
+    };
+  }, []);
 
-    return (
-      <InitializeApp>
-        <IsMobileProvider>
-          <App
-            width={width}
-            height={height}
-            onChange={onChange}
-            initialData={initialData}
-            user={user}
-            onUsernameChange={onUsernameChange}
-          />
-        </IsMobileProvider>
-      </InitializeApp>
-    );
-  },
-  (prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => {
-    const { initialData: prevInitialData, user: prevUser, ...prev } = prevProps;
-    const { initialData: nextInitialData, user: nextUser, ...next } = nextProps;
+  return (
+    <InitializeApp>
+      <IsMobileProvider>
+        <App
+          width={width}
+          height={height}
+          onChange={onChange}
+          initialData={initialData}
+          user={user}
+          onUsernameChange={onUsernameChange}
+        />
+      </IsMobileProvider>
+    </InitializeApp>
+  );
+};
 
-    const prevKeys = Object.keys(prevProps) as (keyof typeof prev)[];
-    const nextKeys = Object.keys(nextProps) as (keyof typeof next)[];
+const areEqual = (prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => {
+  const { initialData: prevInitialData, user: prevUser, ...prev } = prevProps;
+  const { initialData: nextInitialData, user: nextUser, ...next } = nextProps;
 
-    return (
-      prevUser?.name === nextUser?.name &&
-      prevKeys.length === nextKeys.length &&
-      prevKeys.every((key) => prev[key] === next[key])
-    );
-  },
-);
+  const prevKeys = Object.keys(prevProps) as (keyof typeof prev)[];
+  const nextKeys = Object.keys(nextProps) as (keyof typeof next)[];
 
-export default Excalidraw;
+  return (
+    prevUser?.name === nextUser?.name &&
+    prevKeys.length === nextKeys.length &&
+    prevKeys.every((key) => prev[key] === next[key])
+  );
+};
+
+export default React.memo(Excalidraw, areEqual);